Trey Runcie

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.

Item Selector example

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

The HTML Builder is for creating markup structure with javascript in a concise nested structure. It uses the YUI Global Object and the YUI Dom object available from the Yahoo! User Interface Library.

There are four public functions.

1. contentTag: a function for creating html elements with child nodes.
2. tag: a function for creating self closing html elements like img, input or br.
3. write: a function for rendering the html elements to the DOM.
4. addEvent: a function that adds an event to an element and returns that element for rendering in the Dom.

HTML Builder Demo

Sample Usage

var HTML = YAHOO.treyruncie.html;
HTML.write(HTML.contentTag('a',{'href':'somelink'},'text node'));

var HTML = YAHOO.treyruncie.html;
HTML.write(
    HTML.contentTag('div',{'class':'divFromScript'},
        'DIV and input from script',
        HTML.tag('br'),
        HTML.contentTag('label',{'for':'sample'},
            'label for sample',
            HTML.tag('input',{'value':'hello world','name':'sample'})
        ),
        HTML.tag('br'),
        'DIV and input from script'
    ),
    'targetID','insertAfter'
);