jQuery之模拟Select下拉框【转】
2014-11-22 00:00
453 查看
select几乎我们都会碰到,而默认的select下拉框很难看。而且各个浏览器的SELECT下拉框的默认样式都不一样,可能在CHROME里很美观,但是一到IE就丑爆了。这里我们用jQuery来模拟Select下拉框。
jQuery-select
HTML代码
CSS代码
jQuery代码
使用前记得引入jQuery
jQuery-select
HTML代码
<div class="selectContainer"> <span class="selectOption gray">点击选择下拉框内容</span> <ul class="selectMenu"> <li>江西省</li> <li>广东省</li> <li>江苏省</li> <li>河北省</li> <li>湖南省</li> </ul> <span class="shows"></span> </div>
CSS代码
/* ---- Select ----*/ .selectContainer{position:relative; width:262px; display:inline-block; _display:inline; _zoom:1; z-index:1000; background:#FFF; border:1px solid #CCC} .selectContainer input{} .selectContainer .selectOption{min-width:180px; padding:0 5px; line-height:25px; height:25px; white-space:nowrap; overflow:hidden;border:none; width:250px; z-index:1000} .selectContainer .shows{width:20px; height:20px; position:absolute; right:2px; top:2px; background:url(images/select-ico.gif) no-repeat center center} .selectContainer ul{position:absolute; width:100%; top:25px; left:-1px; border-bottom:1px solid #CCC; display:none;} .selectContainer ul li{padding:0 5px; border:1px solid #CCC; border-bottom:1px solid #EEE; border-top:none; line-height:25px; width:252px; background:#FFF; cursor:pointer} .selectContainer ul li:hover{background:#F5F5F5} .selectContainer ul.dis{display:block!important;} .selectContainer ul.undis{display:noneimportant;} .zIndex{z-index:10000!important} .selectContainer .gray{color:#DDD}
jQuery代码
使用前记得引入jQuery
(function($){ jQuery.fn.select = function(options){ return this.each(function(){ var $this = $(this); var $shows = $this.find(".shows"); var $selectOption = $this.find(".selectOption"); var $el = $this.find("ul > li"); $this.click(function(e){ $(this).toggleClass("zIndex"); $(this).children("ul").toggleClass("dis"); e.stopPropagation(); }); $el.bind("click",function(){ var $this_ = $(this); $this.find("span").removeClass("gray"); $this_.parent().parent().find(".selectOption").text($this_.text()); }); $("body").bind("click",function(){ $this.removeClass("zIndex"); $this.find("ul").removeClass("dis"); }) //eahc End }); } })(jQuery); $(".selectContainer").select(); //调用
相关文章推荐
- jquery input 下拉框(模拟select控件)焦点事件
- jquery 模拟 select 插件
- jquery multiSelect 多选下拉框
- jquery 获取和设置 select下拉框的值
- jQuery 获取和设置select下拉框
- jQuery美化select下拉框
- Jquery 结合Json控制Select下拉框
- jQuery模拟的简单的select下拉菜单
- jQuery中下拉框select的操作方法详解
- jquery 获取和设置 select下拉框的值
- jQuery模拟select小插件
- 【js:片断】jQuery 设置 select 下拉框的选中状态
- dhl:jquery select下拉框,checkbox,选择
- jquery 获取和设置 select下拉框的值
- jquery 获取和设置 select下拉框的值
- jquery用ul模拟表单select列表/菜单效果
- 改进 jQuery Select(单选) 模拟插件 V1.3.6,增加mouseover事件
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- jquery操作select下拉框的多种方法(选中,取值,赋值等)
- jQuery模拟select下拉菜单