自定义select模拟--基于jQuery

最新推荐文章于 2024-07-19 03:20:11 发布

转载最新推荐文章于 2024-07-19 03:20:11 发布 · 196 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/qd4world/p/3216168.html

本文介绍了一种使用HTML、CSS和JavaScript模拟原生select元素的方法，实现了更丰富的样式定制，同时保持了与各种浏览器的兼容性，包括IE6-10、Firefox、Chrome等。该方法通过自定义的html结构，配合特定的CSS和JS，可以轻松地转换select元素的样式，支持select项、optgroup项及change事件。

说明

模拟select，实现原生select不能实现的样式

将html结构入在Html页面中，css,js做分离

开发人员引用只要引入相关文件，并$().selectbox()就可转换样式，有更新时selectbox下，不会生成重复的html，不会重复绑定事件

selectbox唯一的参数是当html结构的script不是J_SelectBoxHtml时，传入script的expr

支持ie6-10,ff,chrome,safari,opera

支持select项

支持select的optgroup项

支持select的change事件

支持select的change规则，值未变化时不触发change，值变化时才触发。

增加select的change规则，select上加入data-change="click"属性时，无论值变化与否，都触发change事件

支持select的disalbed属性

与select等宽

支持select边界控制

html结构示例

<span class="select_box" style="z-index:100;">
	<%= SELECT %>//隐藏的select位置
	//选中项的显示	
	<span class="select_up"><span class="select_up_text"></span><b></b></span>
	//下拉框
	<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;">
			//optgroup 中的option
			<a href="javascript:;" data-value="{{value}}">{{text}}</a>
			<a href="javascript:;" data-value="{{value}}">{{text}}</a>
		</div>
	</span>
</span>

script中html形式

<script type="text/selectbox" id="J_SelectBoxHtml">
//select容器
<%WRAP%><span class="select_box" style="z-index:100;"></span><%/WRAP%>
//select兄弟	
<% 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，可选
<% GROUPLABEl %><a href="javascript:;" data-group="J_Group{{index}}">{{text}}<b class="icon" /></a><% /GROUPLABEl %>
//optgroup容器，可选	
<% GROUPWRAP %><div class="erji J_Group{{index}}" style="display:none;"><%= OPTION %></div><% /GROUPWRAP %>
</script>

Demo

Demo下载地址

转载于:https://www.cnblogs.com/qd4world/p/3216168.html

标签