Example 1 - 1 list, with 5 selectable items, and 1 non-selectable. Maximum 1 option.Custom onMaxSelected

	The HTML markup
	

<div id="list" class="list">
	<div class="headingList">Not Selectable</div>
	<div class="option" rel="1">Option 1</div>
	<div class="option" rel="2">Option 2</div>
	<div class="option" rel="3">Option 3</div>
	<div class="option" rel="4">Option 4</div>
	<div class="option" rel="5">Option 5</div>
	< class="error" id="divError"></div>
</div>
	The Javascript
	

	new mooltiselect({
		maximum: 1,
		onMaxSelected: function(){$('divError').setProperty('text','You can only Select 1 options from this list!');},
		name:'List1'
	});	
	
	
						

Example 2 - 1 list (ol), with 6 selectable items, no maximum

	The HTML markup
	

<ol id="list1" class="list">
	<li class="option" rel="1">Option 1</li>
	<li class="option" rel="2">Option 2</li>
	<li class="option" rel="3">Option 3</li>
	<li class="option" rel="4">Option 4</li>
	<li class="option" rel="5">Option 5</li>
	<li class="option" rel="6">Option 6</li>
</ol>
	The Javascript
	

	new mooltiselect({
		list: 'list1',
		name:'List2'
	});	
	
	
						

Example 3 - 1 list, with 5 selectable items, and 1 non-selectable. Maximum 3 option and sort enable

	The HTML markup
	

<div id="list2" class="list">
	<div class="headingList">Not Selectable</div>
	<div class="option" rel="1">Option 1</div>
	<div class="option" rel="2">Option 2</div>
	<div class="option" rel="3">Option 3</div>
	<div class="option" rel="4">Option 4</div>
	<div class="option" rel="5">Option 5</div>
</div>
	The Javascript
	

	new mooltiselect({
		list: 'list2',
		maximum: 3,
		sort: true
	});	
	
	
						

Example 4 - 1 list, with 5 selectable items, and 2 non-selectable. Maximum 3 options and an alternate selected color

	The HTML markup
	

<div id="list3" class="list">
	<div class="headingList">Not Selectable</div>
	<div class="option" rel="1">Option 1</div>
	<div class="option" rel="2">Option 2</div>
	<div class="option" rel="3">Option 3</div>
	<div class="option" rel="4">Option 4</div>
	<div class="option" rel="5">Option 5</div>
	<div class="headingList">Not Selectable</div>	
</div>
	The Javascript
	

new mooltiselect({
	maximum: 3,
	list: 'list3',
	selectedClass: 'selectedRed'
});	
	
	
						

Example 5 - 1 list, with 5 selectable items, Maximum 3 options and an custom error message

	The HTML markup
	

<div id="list4" class="list">
	<div class="option" rel="1">Option 1</div>
	<div class="option" rel="2">Option 2</div>
	<div class="option" rel="3">Option 3</div>
	<div class="option" rel="4">Option 4</div>
	<div class="option" rel="5">Option 5</div>
</div>
	The Javascript
	

new mooltiselect({
	maximum: 3,
	list: 'list4',
	errorMessage: "I'm Sorry, only %MAX% options allowed\nTry unselecting another option before"
});	
	
	
						

Example 6 - 1 list, with 5 selectable items, Maximum 3 options, custom error message and drag false

	The HTML markup
	

<div id="list4" class="list">
	<div class="option" rel="1">Option 1</div>
	<div class="option" rel="2">Option 2</div>
	<div class="option" rel="3">Option 3</div>
	<div class="option" rel="4">Option 4</div>
	<div class="option" rel="5">Option 5</div>
</div>
	The Javascript
	

new mooltiselect({
	maximum: 3,
	list: 'list5',
	drag: false,
	errorMessage: "only %MAX% options allowed"
});