BoxSelector Widget v7
- 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' });