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

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'
);