基于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小技巧
Mar 01 Javascript
jquery ui对话框实例代码
May 10 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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
图书管理程序(三)
2006/10/09 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
Bootstrap Table使用整理(二)
2017/06/09 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python实现动态循环输出文字功能
2020/05/07 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
在校硕士自我鉴定
2014/01/23 职场文书
档案信息化建设方案
2014/05/16 职场文书
学用政策心得体会
2014/09/10 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
一级电子管军用接收机测评
2022/04/05 无线电