Basic

This is a multiple select box :

User can select several options by holding a meta-key when clicking a new option. It is a common widget for user interaction on the Internet.

But it is a difficult widget to use. Forget holding the meta-key when selecting a new option and you will loose all your selection. And there is no way to undo it. And there isn't a confirmation dialog.

Morphing into primal

The idea is to make this multiple select box easier to use.

There is 3 part :

• At the left : non selected options

  Unknown end tag for </li>

• At the center : action button

  Unknown end tag for </li>

• At the right : selected options (the ones that will be submitted

  Unknown end tag for </li>

To interact with those options, there is 3 different ways :

• Use the buttons to transfer all or a few options of any list to the other one

  Unknown end tag for </li>

• Double click on an option will transfer it to the other list

  Unknown end tag for </li>

• Arrow key (left and right) will transfer an option to the other list

  Unknown end tag for </li>

Limitations

• Double click doesn't work on Safari

  Unknown end tag for </li>

• Arrow key doesn't work on Safari

  Unknown end tag for </li>

Options

• size : (default -1) if value is greater than 0, than it will be the size of the select box. If it's -1, the size define in html will be use
• rtSearch : (default true) true or false, to know if we display the text box to make selection in non-selected element easier
• navByDblClick : (default true) true or false, to know if we bind the (un)select action with double click element (it seems that it isn't working on safari)
• navByArrows : (default true) true or false, to know if we bind the (un)select action with arrow navigation (right or left) on element (it seems that it isn't working on safari)
• navByButtons : (default true) true or false, to know if we display and bind the (un)select action with buttons
• addBreaker : (default true) true or false, to know if we add
  
  at the end of the containers. It can be useful if all containers are float elements ...
• lblCurrentElement : (default value of contained label) Label for selected elements select box
• lblSearch : (default "State a name or choose from list") Label for unselected elements filter
• lblLeftSelected : (default "<-") Label for selected elements go to left
• lblLeftSelected : (default "<--") Label for all elements go to left
• lblLeftSelected : (default "->") Label for selected elements go to right
• lblLeftSelected : (default "-->") Label for all elements go to right

Configuration / Exemple

By default, the decoration will use configuration of the select box (size attribute, label, ...)

You can bypass this by defining specific options to the decoration. The same way, you can de-activate some user interaction.

Here is the code for a multiple select box :

<div class="decorated" id="mySelectBox1">
	<label for="mySelect1">My select</label>
	<select name="mySelect1" id="mySelect1" multiple="multiple" size="15">
		<option value="00">00</option>
		<option value="01" selected="selected">01</option>
		<option value="02">02</option>
		<option value="03">03</option>
		<option value="04" selected="selected">04</option>
		<option value="05" selected="selected">05</option>
		<option value="06">06</option>
		<option value="07" selected="selected">07</option>
		<option value="08" selected="selected">08</option>
		<option value="09" selected="selected">09</option>
		<option value="10">10</option>
		<option value="11" selected="selected">11</option>
		<option value="12">12</option>
		<option value="13">13</option>
		<option value="14" selected="selected">14</option>
		<option value="15" selected="selected">15</option>
		<option value="16">16</option>
		<option value="17" selected="selected">17</option>
		<option value="18" selected="selected">18</option>
		<option value="19" selected="selected">19</option>
	</select>
</div>

Here is the javascript code needed to decorate it :

<script language="JavaScript" type="text/javascript">
	$(document).ready(function(){
		$("#mySelectBox1").decorate();
	});
</script>

You can change some parameter by using an array in argument (the whole option list is available above). Here is we change the selected elements and the buttons' label :

<script language="JavaScript" type="text/javascript">
	$(document).ready(function(){
		$("#mySelectBox1").decorate({
			lblCurrentElement : "My new label for selected Roles",
			lblLeftSelected: "<<",
			lblLeftAll: "<< All",
			lblRightSelected: ">>",
			lblRightAll: "All >>"
		});
	});
</script>