Custom select simulation based on jQuery

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Explain

Simulation of select, the original select can not realize the style

The HTML structure in Html pages, CSS, JS separation

Developers as long as the reference documents, and $() ().Selectbox convertible style, updates to selectbox, HTML will not generate repeat, will not repeat binding events

The selectbox parameter is only when the HTML structure of the script is not J_SelectBoxHtml, the incoming script expr

Support ie6-10,ff,chrome,safari,opera

Support select

Support for select optgroup

Support for the select change event

Support select change rules, value does not trigger the change did not change, change to trigger.

Increased select change rules, data-change= "click" attribute is added to select, regardless of value or not, will trigger the change event

The disalbed property to support select

With select width

Support select boundary control

The structure of HTML sample
<span class="select_box" style="z-index:100;">
	<%= SELECT %>//The hidden select position
	//Select to display the item	
	<span class="select_up"><span class="select_up_text"></span><b></b></span>
	//The drop-down box
	<span class="select_list" style="display:none;">
		//option
		<a href="javascript:;" data-value="{{value}}">{{text}}</a>
		<a href="javascript:;" data-group="J_Group2">{{text}}<b class="icon" /></a>
		//optgroup
		<div class="erji J_Group2" style="display:none;">
			//In optgroup option
			<a href="javascript:;" data-value="{{value}}">{{text}}</a>
			<a href="javascript:;" data-value="{{value}}">{{text}}</a>
		</div>
	</span>
</span>
HTML forms in script
<script type="text/selectbox" id="J_SelectBoxHtml">
//The select container
<%WRAP%><span class="select_box" style="z-index:100;"></span><%/WRAP%>
//The select brothers	
<% BODY %><span class="select_up"><span class="select_up_text"></span><b></b></span><span class="select_list" style="display:none;"></span><% /BODY %>
//Option	
<% OPTION %><a href="javascript:;" data-value="{{value}}">{{text}}</a><% /OPTION %>
//Optgroup label, optional
<% GROUPLABEl %><a href="javascript:;" data-group="J_Group{{index}}">{{text}}<b class="icon" /></a><% /GROUPLABEl %>
//The optgroup container, optional	
<% GROUPWRAP %><div class="erji J_Group{{index}}" style="display:none;"><%= OPTION %></div><% /GROUPWRAP %>
</script>
Demo

Demo download.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Carrie at November 18, 2013 - 5:38 PM