BoxSelector Widget v7 - nodeGame/nodegame GitHub Wiki
- status : complete
- version : 7.x
BoxSelector widget closed.
BoxSelector widget opened, showing available items.
Displays a configurable button that if clicked opens a menu with a list of items to select from. The items menu is dynamic, items can be added and removed any time.
-
onclick: A callback triggered when a menu item is clicked. -
getDescr: A callback that returns the item description to be displayed in the menu. -
getId: A callback that returns a unique id for each item.
-
addItem(item): Adds an item to the list and renders it into the DOM. -
removeItem(id): Removes an item with given id from the list and the DOM; returns the removed item or FALSE, if not found.
// Create and append a new BoxSelector widget.
var root = document.body;
var bs = node.widgets.append('BoxSelector', root, {
getId: function(item) {
return item.id;
},
getDescr: function(item) {
return item.text;
},
onclick: function(item, id) {
// In this example, when items are clicked
// they get removed, and when all items have
// been clicked, the box selector is destroyed.
this.removeItem(id);
if (this.items.length === 0) {
this.destroy();
}
}
});
// Add items to box selector.
bs.addItem({ id: 1, text: 'Option 1' });
bs.addItem({ id: 2, text: 'Option 2' });
bs.addItem({ id: 3, text: 'Option 3' });