|
1.解决了有些select 美化代码,无法触发原有select 控件的onchange 事件问题。 2.允许多次调用 $("...").selectCss()，以解决Select的options更新后无法同步的问题。 使用方法如下： <!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> 主要文件包括 selectCss.css 和 selectCss.js selectCss.js 文件代码: (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); selectCss.Css 文件代码: .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; } selectbg.jpg 图片: 
(责任编辑：admin) |