- 浏览: 25694 次
- 性别:
- 来自: 北京
文章分类
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="selectCss.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="selectCss.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").selectCss(); }); </script> </head> <body> <select name="" onchange="alert(this.value)" id="select1"> <option value="1" title="选项选项选项选项" >选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <select name="" id="select2"> <option value="1">选项31</option> <option value="2">选项32</option> <option value="3">选33</option> </select> </body> </html>
.tag_select{display:block;color:#000;width:179px;height:23px;background:transparent url("images/index_22.jpg") no-repeat 0 0;padding:0 10px;line-height:23px; color:#7D7D7D; font-size:12px; cursor:pointer} .tag_select_hover{ color:#ff0000; background:transparent url("selectbg.jpg") no-repeat 0 0; } .tag_select_open{ color:#0000ff; background:transparent url("selectbg.jpg") no-repeat 0 0;} ul.tag_options{position:absolute;margin:0;list-style:none;background:#fff;padding:0 0 1px;margin:0;width:162px ; height:100px; overflow:hidden; overflow-y:auto; font-size:12px; margin-left:10px; cursor:pointer; z-index:1000 } ul.tag_options li{background:#fff; display:block;width:140px;padding:0 10px;height:20px;text-decoration:none;line-height:20px;color:#000; font-weight:normal; font-size:12px} ul.tag_options li.open_hover{background:#0000ff;color:#000; font-weight:normal; font-size:12px} ul.tag_options li.open_selected{background:#ccc; font-size:12px;font-weight:bold; }
(function($){ function hideOptions(speed){ if(speed.data){speed=speed.data} if($(document).data("nowselectoptions")) { $($(document).data("nowselectoptions")).slideUp(speed); $($(document).data("nowselectoptions")).prev("div").removeClass("tag_select_open"); $(document).data("nowselectoptions",null); $(document).unbind("click",hideOptions); $(document).unbind("keyup",hideOptionsOnEscKey); } } function hideOptionsOnEscKey(e){ var myEvent = e || window.event; var keyCode = myEvent.keyCode; if(keyCode==27)hideOptions(e.data); } function showOptions(speed){ $(document).bind("click",speed,hideOptions); $(document).bind("keyup",speed,hideOptionsOnEscKey); $($(document).data("nowselectoptions")).slideDown(speed); $($(document).data("nowselectoptions")).prev("div").addClass("tag_select_open"); } $.fn.selectCss=function(_speed){ $(this).each(function(){ var speed=_speed||"fast"; if($(this).data("cssobj")){ $($(this).data("cssobj")).remove(); } $(this).hide(); var divselect = $("<div></div>").insertAfter(this).addClass("tag_select"); $(this).data("cssobj",divselect); var divoptions = $("<ul></ul>").insertAfter(divselect).addClass("tag_options").hide(); divselect.click(function(e){ if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul").get(0)){ hideOptions(speed); } if(!$(this).next("ul").is(":visible")) { e.stopPropagation(); $(document).data("nowselectoptions",$(this).next("ul")); showOptions(speed); } }); divselect.hover(function(){ $(this).addClass("tag_select_hover"); } , function(){ $(this).removeClass("tag_select_hover"); }); $(this).change(function(){ $(this).nextAll("ul").children("li:eq("+ $(this)[0].selectedIndex +")").addClass("open_selected").siblings().removeClass("open_selected"); $(this).next("div").html($(this).children("option:eq("+ $(this)[0].selectedIndex +")").text()); }); $(this).children("option").each(function(i){ var lioption= $("<li></li>").html($(this).text()).attr("title",$(this).attr("title")).appendTo(divoptions); if($(this).attr("selected")){ lioption.addClass("open_selected"); divselect.html($(this).text()); } lioption.data("option",this); lioption.click(function(){ lioption.data("option").selected=true; $(lioption.data("option")).trigger("change",true) }); lioption.hover( function(){$(this).addClass("open_hover");}, function(){ $(this).removeClass("open_hover"); } ); }); }); } })(jQuery);
来源:http://www.jb51.net/article/25138.htm
发表评论
-
获取当前鼠标点击的位置
2015-05-13 14:39 0<img src="images/a.gi ... -
判断checkbox是否选中
2015-05-12 11:22 618$('#checker').click(function( ... -
ie67中li下的间隙问题
2014-03-21 17:42 535一、以下是引发此BUG的条件: 必要条件: l ... -
含滚动条的内容区域,文字居中问题 版心问题
2014-01-23 14:53 0最近在工作中遇到了一些版心问题,下面简单的记录一下。 ht ... -
IE6下溢出多余文字--多了一只猪
2013-10-29 14:22 360在IE6中,会无缘无故多出几个字儿来,这是IE6BUG 。 ... -
遇到的问题
2013-10-21 17:45 0影视课堂: 1、影视课堂--影视课堂 当含有滚动条的一个块 ... -
点击空白处下拉列表隐藏,全选,反选,不选
2013-08-13 09:44 720<!DOCTYPE html PUBLIC &quo ... -
美化单个checkbox
2013-08-02 10:37 484<script language="jav ... -
美化type="file"
2013-08-02 10:30 532<div class="fileInput ... -
ie6兼容png前置与背景
2013-07-23 11:16 696次方法需要用到一个插件:DD_belatedPNG.js ... -
美化select
2013-07-29 13:46 534需要用到一个selectbox.js插件,在这里直接粘贴到代码 ... -
下载--美化select 2
2013-07-29 13:46 558<!DOCTYPE html PUBLIC &quo ... -
视频播放 ---滚动条的设置
2013-07-29 13:52 839此方法需要引入一个插件:jscroll.js. 以 ... -
CSS 子div设置float之后父div无法自适应高度问题 --清除浮动
2013-04-18 17:31 0向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear ... -
同一行图片和文字垂直居中以及图片和文字间隙问题
2013-04-04 23:47 14671、垂直居中: 如果一个div中含有图片和文字,并且 ... -
透明度相关问题
2013-04-04 04:48 0背景渐变问题: http://hi.baidu.com/dii ... -
ie6兼容-------Xun
2013-07-23 10:33 6131、float属性对margin的影响-----双边距问题 ...
相关推荐
jQuery 插件编写的select三级联动,多级联动,修改方便,扩展方便
jquery select美化插件selectlist plugin下载地址
jQuery oform beta 0.1.5 - form 表单美化插件源代码 版权:zhang yang soft 交流E-Mail:oceancode@163.com 浏览器支持:IE、Firefox、Opera , google chrome (谷歌) 版本说明: 1. beta 0.1.0 版 支持input...
select下拉菜单美化
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
js select框美化插件制作多种风格的select美化列表框特效,U-Box 风格select框、Mac 风格select框、TM2008 风格select框等。内含js代码下载。
美化HTML的select标签的原始样式,并且不影响原始select的事件方法调用。
支持input text/button 美化 时间:2010-01-25 2. beta 0.1.1 版 支持input radio 单选按钮美化 时间:2010-01-26 3. beta 0.1.2 版 支持input checkbox 多选按钮美化 修改、优化核心代码 时间:2010-01-28 4...
select-mania是一款jQuery下拉选择框美化插件。该插件可以将普通的select下拉选择框转换漂亮的下拉选择框,并且转换后的下拉选择框带搜索功能,可通过AJAX获取数据,带多种主题,还可以自定义主题等。
jquery的select美化插件。还不是很完善。附带jquery1.5
select标签美化,支持空白处点击显示隐藏选项,目前测试过兼容Firefox、Chrome、IE5及以上,原来找到这个方案不支持空白点击事件,后面改好了测试了没问题,难免会有些bug,如果遇到需要优化欢迎交流!
select下拉菜单美化IE里面对选择框设计的CSS样式很难看到效果,用这里的方法就可以自定义下拉菜单了.
Select-or-Die是一款基于jQuery的下拉框美化插件,你不用修改你原来的下拉框,它能够完全无缝的对你原来的下拉框进行美化,它甚至还支持添加前缀、HTML data 属性、键盘循环控制、设置高度、跳转到链接以及回调函数...
select美化下拉框美化select美化下拉框美化select美化下拉框美化select美化下拉框美化select美化下拉框美化
结合jQueryUI对select下拉框美化插件,很不错的多功能下拉框美化,效果是非常不错的,插件支持 自定义参数功能,定义高度,下拉动画效果,下拉的速度,还是很不错的,大家该把传统的select下 拉框的样式改造的时候...
jquery select2 select美化插件
基于jquery的美化select插件,主要方便在不改动项目的情况下,美化select,也可以解决兼容性。
css实现表单Select样式美化css实现表单Select样式美化
js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化