Listbox widget is applied to a select element.
$('#basic').puilistbox();
<select id="basic"> <option value="0">Select One</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
Name | Type | Default | Description |
---|---|---|---|
data | array | null | An array of items to populate listbox dynamically. Objects in this array can be simple types or object with label-value pairs like {label:'Option 1', value:1} |
content | function | null | Template of an item to customize content. |
scrollHeight | integer | 200 | Maximum height boundary of the content, if total height of items exceed this value, scrollbar is displayed. |
Name | Parameters | Description |
---|---|---|
itemSelect |
event: puilistboxitemselect event
item: Selected item |
Fired when an item is selected. |
itemUnselect |
event: puilistboxitemunselect event
item: Unselected item |
Fired when an item is unselected. |
$('#default').puilistbox({ itemSelect: function(event, item) { } });
Name | Parameters | Description |
---|---|---|
selectItem | index: Index of the item. | Selects item with given index. |
unselectItem | index: Index of the item. | Unselects item with given index. |
unselectAll | - | Clears selections. |
enable | - | Enable the widget |
disable | - | Disable the widget. |
option | name: Name of the option | Returns the value of the option. |
option | name: Name of the option, value: Value of the option | Set the value of the option. |
$('#basic').puilistbox('selectItem', 1);
$(function() { var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze', 'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight', 'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 'trontastic', 'ui-darkness', 'ui-lightness', 'vader'); $('#basic').puilistbox(); $('#multiple').puilistbox(); $('#custom').puilistbox({ data: themes, content: function(option) { return '<img src="resources/demo/images/themes/' + option + '.png" alt="" /><span style="float:right;font-size:14px">' + option + '</span>'; } }); });
<h3>Basic</h3> <select id="basic"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> <h3>Multiple</h3> <select id="multiple" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> <h3>Custom</h3> <select id="custom"></select>