JqueryJquery plugins   PortFolioSenamion's PortFolio HomeHome page corner A jquery blog

Senamion.com


Senamion:

Categorie:

Archivi:

jListbox: a formattable listbox

Listbox with images

This is the HTML code of the listbox with images (and an onChange event) ( Show / hidden code )

<select id='lang' name="lang" onChange="alert(this.options[this.selectedIndex].value);" >
	<option value="Italiano" rel="<img src='img/ita.gif' />" selected > Italiano</option>
	<option value="English" rel="<img src='img/eng.gif' align=right hspace=30 />" > English</option>
	<option value="Français" rel="<img src='img/fra.gif' />" > Français</option>
	<option value="Deutch" rel="<img src='img/deu.gif' align=right hspace=30 />" > Deutch</option>
</select>

This is the javascript code of the listbox with images ( Show / hidden code )

$().ready(function() {
	$("#lang").jListbox();
});

The same listbox above without jListbox

Listbox with formatted html

This is the HTML code of the listbox with formatted html ( Show / hidden code )

<select id="test" name='various' >
	<option value="1" rel="<font color=red>Red test</font>"> + normal option</option>
	<option value="2" rel="<b>Bold test</b>"> + normal option</option>
	<option value="3" rel="<i>Italic test</i>"> + normal option</option>
	<option value="4" rel="Various <b>bold</b> <i>italic</i> <u>underline</u>"></option>
	<option value="5" rel="<font color=green>Green test</font>"> + normal option</option>
	<option value="6" rel="<small>Small test</small>"> + normal option</option>
</select>

This is the javascript code of the listbox with formatted html ( Show / hidden code )

$().ready(function() {
	$("#test").jListbox();
});