基于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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
Javascript获取某个月的天数
May 30 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
原生js实现下拉选项卡
Nov 27 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
使用console进行性能测试
2015/04/27 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python关键字and和or用法实例
2015/05/28 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python动态进度条的实现代码
2019/07/03 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Python 实现微信自动回复的方法
2020/09/11 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
企业员工集体活动方案
2014/08/17 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
新年晚会开场白
2015/05/29 职场文书
建国大业观后感800字
2015/06/01 职场文书