Listbox.js is a simple jQuery

Author:	Igor Kalnitsky
License:	BSD 3-clause
Version:	0.3.0-dev
Tests:

Listbox.js is a simple jQuery plugin that provides a more powerful alternative to the standard <select> tag. The main problem of <select tag is that last one isn't flexible for customization with CSS. Listbox.js solves this problem. This component runs on top of <select> tag and creates an alternative to the last one based on <div> tags. It opens up great possibilities for customization.

In addition, this component provides the search bar which would be useful in lists with a lot of items.

This component was born special for XSnippet project.

NOTE: This is my first JavaScript code. So don't judge strictly.

Link the component and a stylesheet from your page.

<!-- make sure that jQuery is already included --> <script src="/path/to/jquery.js"></script> <!-- include listbox plugin and default stylesheet --> <link href="/path/to/listbox.css" rel="stylesheet"> <script src="/path/to/listbox.js"></script>

Create Listbox object.

<select> <option>Item #1</option> <option>Item #2</option> <option>Item #3</option> <option>Item #4</option> </select> <script> $(function() { $('select').listbox({ 'class': 'myOwnClass', 'searchbar': true }); }); </script> Customization

Listbox.js uses following CSS classes.

.lbjs {} /* <div>: component container */ .lbjs-list {} /* <div>: container for list items */ .lbjs-item {} /* <div>: list item */ .lbjs-item:not([disabled]) {} /* <div>: enabled list item */ .lbjs-item[disabled] {} /* <div>: disabled list item */ .lbjs-item[selected] {} /* <div>: selected list item */ .lbjs-searchbar {} /* <input>: search query input */ FAQ

How to bind event handler to the `click` list item event?

Because of Listbox.js dynamically changes DOM you should use jQuery's live() method:

$('.myListboxClass .lbjs-item').live('click', function() { alert($(this).html()); });

How to make disabled item?

The process is similar to making disabled items in the <select>-tag. All you need is to set the disabled attribute.

$('.myOwnClass .lbjs-item').each(function () { var value = $(this).html(); if (['PHP', 'JavaScript'].indexOf(value) != -1) $(this).attr('disabled', ''); });