jQuery.uiSelect 1.6

Description

uiSelect allows you to easily style all elements of form select menus. You can easily set what uiSelect's default value will be by setting "selected=selected" on the <option> element.

uiSelect Plugin takes 3 parameters

First Param (object) -

• leftOffset: Left offset, must be a numerical value
• topOffset: Top offset, must be a numerical value
• addRequired: Boolean value to add required class.
• requiredClass: String value of required class name.

Second Param (String) - ID of the <div> containing your menu items

Third Param (String) - ID of the <input> which will hold the value selected

SAMPLE CODE
$('#selectMenu').uiSelect({leftOffset: -10, topOffset: 0, addRequired:true, requiredClass:'isRequired'},'uiList','uiInput');

Downloads

jquery.uiSelect.1.6-min.js (using YUI)

Example

This is an example of a select menu without the uiSelect plugin applied. Completely skinnable using CSS.

item1 item2 item3 item4 item5 item6

This is an example of a select menu with the uiSelect plugin applied

option1 option2 option3 option4 option5 option6

HTML

<select name="selectMenu" id="selectMenu" size="1">
	<option value="option1">option1</option>
	<option value="option2" selected="selected">option2</option>
	<option value="option3">option3</option>
	<option value="option4">option4</option>
	<option value="option5">option5</option>
	<option value="option6">option6</option>
</select>

CSS

input, select{
	margin: 5px 0px; 
	width: 200px;
}
.uiSelect { 
	width: 245px; 
	height: 302px; 
	padding: 65px 40px 85px 35px; 
	color: #393939; 
	background: url(images/select-bkgd.png) no-repeat 0px 0px;
}
.uiSelect ul li a,.uiSelect ul li a:link,.uiSelect ul li a:active{ 
	display: block; 
	color: #333; 
	width: 235px; 
	height: 20px; 
	padding: 2px 5px; 
	line-height: 20px; 
	background: none;}
.uiSelect ul li a:hover{
	background: #333; 
	color:#fff; 
	text-decoration: none; 
	display: block;
	width: 235px; 
	height: 20px; 
	padding: 2px 5px; 
	line-height: 20px;
}
#uiInput {
	height: 20px; 
	background: #333; 
	color : #fff;
}

jQuery

<script type="text/javascript" charset="utf-8">
$(function(){
	//This uiSelect Plugin takes 3 parameters
	//First Param  - (object) for the left and top offsets - must be a numerical value. addRequired: Boolean value to add required class. requiredClass: String value of required class name
	//Second Param - (String) ID of the <div> containing your menu items
	//Third Param  - (String) ID of the <input> which will hold the value selected

	$('#selectMenu').uiSelect({leftOffset: -10, topOffset: 0, addRequired:true, requiredClass:'isRequired'},'uiList','uiInput');
});
</script>