Cette page du wiki de BGA est affichée en anglais car son contenu n'est pas encore disponible dans votre langue. Vous pouvez la créer !
Example
In mygame_mygame.tpl (the border is not required):
<div id="my_expandable" style="border: 1px solid black"> <a href="#" id="my_click_to_toggle" class="expandabletoggle expandablearrow"> <div class="icon20"></div> </a> <div id="my_hidden_content" class="expandablecontent"> Here's the hidden content </div> </div>
In mygame.js:
define([ ebg/expandablesection ], ...
this.expanded = new ebg.expandablesection(); this.expanded.create(this, "my_expandable"); this.expanded.expand(); // show this.expanded.collapse(); // hide this.expanded.toggle(); // switch show/hide
Notes
- All of the inner parts of the expandable div must have ids so dojo.query can find them.
- The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.
- Source code can be found here : https://x.boardgamearena.net/data/themereleases/220811-1000/js/modules/expandablesection.js
Helper Code
This doesn't appear to be part of the BGA framework, but might make creating the above code easer and more readable.
In mygame_mygame.tpl:
var jstpl_expandablesection = '\ <div id="${id}">\ <a href="#" id="toggle_${id}" class="expandabletoggle expandablearrow">\ <div class="icon20"></div>\ </a>\ <div id="content_${id}" class="expandablecontent">\ ${content}\ </div>\ </div>';
In mygame.js:
placeExpandableSection: function(parent_id, id, content) { html = this.format_block('jstpl_expandablesection', { id: id, content: content }); dojo.place(html, parent_id); },
Cette page provient du wiki de BGA et a été rédigée par la communauté des joueurs de BGA. N'hésitez pas à la modifier !