Item Selector *rough draft
Item Selector is a Javascript list multi-select UI component similar to a multiple select form element. It allows the user to click, shift+click, and crtl/option+click the elements to make a selection. It also has a few custom events which can be subscribed to. It uses the YUI Global Object, YUI Dom object, and the YUI Event object available from the Yahoo! User Interface Library.
The mark up is a simple ul:
<ul id="selectable-container">
<li><a href="#">dog</a></li>
<li><a href="#">cat</a></li>
<li><a href="#">bird</a></li>
<li><a href="#">whale</a></li>
<li><a href="#">frog</a></li>
<li><a href="#">monkey</a></li>
<li><a href="#">mouse</a></li>
</ul>
The reason for the “<a>” tags is to keep the browser from selecting the text during a shift+click.
To create an instance of ItemSelector:
var selectContainer = new ItemSelector.selectList('selectable-container',{css:{selectedClass: 'selected-item'}});
The first argument to the selectList method is the id of the ul and the second argument is a config object containing a class to apply to the selected li’s.
Here are a few events which can be subscribed to:
- hasSelection – fires whenever the selection is modified and there is still a selection
- noSelection – fires when the selection is cleared or the selection length becomes zero
- noItems – fires when all list elements have been removed
- lengthChanged – fires whenever the selection length changes
- itemDoubleClick – fires if an item has been double clicked
Tags: Javascript, yui