基于jquery的网页SELECT下拉框美化代码


Posted in Javascript onOctober 28, 2010

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 图片:
基于jquery的网页SELECT下拉框美化代码
Javascript 相关文章推荐
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
jQuery编写widget的一些技巧分享
Oct 28 #Javascript
jQuery timers计时器简单应用说明
Oct 28 #Javascript
jquery ajax abort()的使用方法
Oct 28 #Javascript
BOM与DOM的区别分析
Oct 26 #Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 #Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 #Javascript
基于jquery的给文章加入关键字链接
Oct 26 #Javascript
You might like
php数组的一些常见操作汇总
2011/07/17 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python去除列表中重复元素的方法
2015/03/20 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
what is the difference between ext2 and ext3
2013/11/03 面试题
应届大学生求职信
2013/12/01 职场文书
企业挂职心得体会
2014/09/10 职场文书
公司更名通知函
2015/04/24 职场文书
学雷锋活动简报
2015/07/20 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS