基于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 相关文章推荐
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python 实现在Excel末尾增加新行
2018/05/02 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Python字典对象实现原理详解
2019/07/01 Python
python 表格打印代码实例解析
2019/10/12 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
北京故宫的导游词
2015/01/31 职场文书
个人求职信格式范文
2015/03/20 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书