Added items are returned. Check the "real world example": Populate with an array
SDB.Listbox.add( element, 'string' ); // Or an array of strings
Remove item using indexes. This one doesn't take in arrays.
SDB.Listbox.remove( element, 1 );
Target element should be the .list-box
item and not its child items.
SDB.Listbox.empty( element );
Toggles the selection of an item with the specified index or text content.
SDB.Listbox.toggle( element, 1 );
SDB.Listbox.toggle( element, 'string' );
Selects an item with the specified index or text content.
SDB.Listbox.select( element, 1 );
SDB.Listbox.select( element, 'string' );
Deselects an item with the specified index or text content.
SDB.Listbox.deselect( element, 1 );
SDB.Listbox.deselect( element, 'string' );
Deselects all items. Target element .list-box
.
SDB.Listbox.deselectAll( element );
Returns an array of indexes or item text content.
SDB.Listbox.selection.index( element);
SDB.Listbox.selection.text( element );
element.addEventListener("onSelect", function(e) {
console.log( e.detail );
});
var listbox = SDB.id(1);
var addedItems = SDB.Listbox.add( listbox, ['Item 1', 'Item 2', 'Item 3'] );
console.log( addedItems );
var listbox = SDB.id(1);
var addedItems = SDB.Listbox.add( listbox, ['Item 1', 'Item 2', 'Item 3'] );
console.log( addedItems );
SDB.Listbox.select( SDB.id(1), 'Item 2' );
SDB.Listbox.selection.text( SDB.id(1) );
var listbox = SDB.id(1);
SDB.Listbox.deselectAll( listbox );
var listbox = SDB.id(1);
var listboxItems = pickAll('li', listbox);
var button = SDB.id(2);
button.addEventListener("click", function() {
for( var item of listboxItems ) {
item.classList.add('selected');
}
});
To disable listbox items, you need to get a bit tricky. You can't use SDB.disable.id
or SDB.disable.name
because Listbox items don't have either. Also there is no method for disabling with index. The only thing left is the SDB.disable.element()
, which may also be difficult since they don't have any distinct hooks you can latch onto. The snippet below gets the element based on its index.
If you're populating the listbox yourself, you could easily scatter around classes and/or data-attributes that you can target later on for disabling purposes or something else.
This snippet disables the second item in the specified list.
var listBox = SDB.id(1);
var listItem2 = selectAll('li', listBox)[1];
SDB.disable.element( listItem2 );
The HTML might be slightly cleaned up to make it easier to to read.
<div class="list-box" data-item-type="listbox" data-item-id="1" data-item-parent-id="0">
<div class="inner-wrap">
<ul>
<li class="selected"><span>Item 1</span></li>
<li><span>Item 2</span></li>
</ul>
</div>
</div>