Marcelo Origoni - mooltiSelect - 2.0

mooltiSelect 2.0 Documentation

What's mooltiselect?

mooltiSelect is a library that will allow you to create a multiselect combo box, from any list in you html code
it can be an ul, an ol, a series of divs or spans. anything can be converted to a multiselect combo box.
You can even select the maximum options the user will be able to select, and they won't need to use ctrl + click to select more than 1 option.

Which versions of mootools is it compatible with?

mooltiselect is compatible with mootools 1.2 and 1.3.

How to use it?

You'll need a few thing to use it. First of all the mootools Core library and the Fx.Sort part of the moootools More Library. both files are included in the download, along with the mooltiSelect file.
you need to include the 3 files in betweend the <head> and </head> of your html code. and don't forget the style sheet.
then jsut add to your domready event, the call to mooltiSelect, something like:

	window.addEvent('domready', function(){
		new mooltiselect([options]);

Which Properties you can pass to mooltiSelect, and which are the default values?

This are the available options:

	list: 'list',
	options: 'option',
	selectedClass: 'selected',
	name: 'listBox',
	sort: false,
	drag: true,
	maximum: 0,
	errorMessage: 'You already selected the maximum of %MAX% items',
	onMaxSelected: ''

list, is the id of the container element, default value is list.
options, is the class of the elements you want to convert to a multiselect, defaults to option.
selectedClass, is the class mooltiSelect gives to the selected items, so the user can know which options (s)he selected, default selected.
name, is the name that will assign to the input elements, that will be send in the form, defaults to listBox.
sort, it's a boolean, and enables/disables the ability to sort the options, defaults to false.
drag, it's a boolean, enables/disables the multiple selection by dragging the mouse, defaults to true.
maximum, it's the limit of options the user can select, 0 means no limit and it's also de default value. errorMessage The error message displayed when the maximum options are selected, it accept a %MAX% wildcard, that will be replaced with the number of options. defaults to 'You already selected the maximum of %MAX% items' onMaxSelected Function to be executed once the maximum number of options is selected, if no function is passed, the default behaivour is to alert the error message. Defaults to ''

is there any special markup I need to know?

Yes there is, it's not a big thing, bur you need to place a rel attribute in your option elements, that's where mooltiSelect gets the value for each option.

Why if I select sortables, the options are not selected?

In oreder to select any option, while sortable enable, you need to doubleclick, sin the click event, is associated with the sorting.

I recommened to check the demo, since I'm not the best of the writers, when comes to write documentation, though, I think I made a descent job here.