select标签模拟/美化方法采用JS外挂式插件


Posted in Javascript onApril 01, 2013

<select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰。

在这将本人对<select>的美化方法共享出来。
优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS。(注:本脚本依赖jQuery)

啥也不说了,都在代码里。

 
$(document).ready(function () { 
// 找出需要美化的<select>标记,我们用一个class名称 "beautify" 来确定,没有这个样式的<select>则将被忽略 
var selects = $("select.beautify"); 
if (selects.length > 0) { 
//先在代码底部增加一个<div>,用来承载和显示下拉框选项 
$("body").append("<div id='dummydata' style='position:absolute; display:none'></div>"); 
//挨个美化呗 
selects.each(function () { 
//给本函数下的 this (也就是 <select>) 设置一个别名,在下面的匿名函数中将会被用到 
var select = this; 
//创建一个 <input> , .dummy 将用于我们对此类 <input> 进行专门样式定义 
//同时将 <select> 的部分属性和样式复制给这个 dummy input 
//创建完后,将这个 <input> 插入 dom, 紧跟原 <select> 
var input = $("<input type='text' readonly='readonly' class='input dummy' />") 
.attr("disabled", this.disabled) 
.css("width", parseInt(this.style.width) + "px") 
.css("display", this.style.display) 
.insertAfter(this) 
.val(this.options[this.selectedIndex].text); 
//将 <select> 藏掉,不要在 .beautify 中去定义 display:none, 因为js加载失败时,我们还得用上它 
this.style.display = "none"; 
// 当 <input class='dummy'> 被点击时 
input.click(function () { 
//调出前面创建的 <div id='dummydata'>,并清空内容 
//将 <select> 的样式表传递给它,当需要对这个 <div> 进行修饰时,就靠这些样式定义 
var div = $("#dummydata") 
.empty() 
.attr("class", select.className); 
//设置 <div> 的宽度 
//在这里我们判断一个特殊的class名 "extend" 
//如果带有 .extend,表示宽度将受额外自定义控制;否则,宽度将默认与 <input> 一致 
$(select).hasClass("extend") 
? div.css("width", "") 
: div.css("width", $(this).innerWidth()); 
//将 <option> 复制到 <div id='dummydata'> 里面,一个 <option> 对应一个 <a> 标记 
for (var i = 0; i < select.options.length; i++) { 
var item = select.options[i]; 
var a = $("<a href='javascript:void(0);' class='nowrap'></a>") 
.css("color", item.style.color) 
.addClass(item.className) 
.html(item.text) 
.appendTo(div); 
if (i == select.selectedIndex) { 
a.addClass("selected"); 
} 
//当选项被点击时,<input> 内容显示为对应 <option>,关闭 <div> 层,同时将事件冒泡给原来的 <select> 
a.click(function () { 
var n = $(this).index(); 
select.selectedIndex = n; 
input.val(select.options[n].text); 
div.hide(); 
$(select).change(); 
}); 
} 
//在这里我们判断一个特殊的class名 "noscroll" 
//当选项过多时,默认会让选项列表出现滚动条;但如果有 .noscroll 修饰,则强制不出现滚动条 
var noscroll = (select.options.length < 10 || $(select).hasClass("noscroll")); 
if (/msie 6/i.test(window.navigator.userAgent)) { 
div.css("height", noscroll ? "auto" : "215px").css("overflow-y", noscroll ? "hidden" : "scroll"); 
} else { 
div.css("max-height", noscroll ? "10000px" : "215px"); 
} 
//在这里我们判断一个特殊的class名 "onside" 
//如果有 .onside 修饰,弹出的选项层将在侧面,否则是在下面 
//注: 此处用到2个函数 locateBeside 和 locateBelow 是本人js库中的方法,稍等另外给出 
$(select).hasClass("onside") 
? div.locateBeside(this, -2) 
: div.locateBelow(this, -4); 
//对反复点击 <input> 之类的事情,做一些智能调节 
if (window.activeDummySelect == select) { 
div.slideToggle(100); 
} else { 
div.hide().slideDown(100); 
window.activeDummySelect = select; 
} 
//在有滚动条的情况下,我们需要将滚动条滚动到当前选中项的位置 
if (!select.selectedIndex > 6 && div[0].scrollHeight > div.height()) { 
div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight); 
} 
}); 
}); 
//最后别忘了:点击网页上的游离区域时,应该隐藏<div #dummydata> 
$(document).click(function (e) { 
if (!$(e.target).is(".dummy") && !$(e.target).is("#dummydata")) { 
$("#dummydata").hide(); 
} 
}); 
} 
});

上面代码里说用到了2个方法: locateBeside 和 locateBelow, 是本人js库中对 jQuery 的扩展,顺便多赠送2个方法 locate 和 locateCenter
:-)  代码如下:
$.fn.extend({ 
locate: function (x, y) { 
if (this.css("position") == "fixed") { 
y -= $(document).scrollTop(); 
} 
return this.css({ left: x, top: y }); 
}, 
locateBeside: function (el, adjustX) { 
var p = $(el).offset(), 
w1 = $(el).outerWidth(), 
w2 = this.outerWidth(), 
h2 = this.outerHeight(), 
x = p.left + w1 + 5 + (adjustX || 0), 
y = p.top; 
if ($(document).width() < x + w2) { 
x = p.left - w2 - 5 - (adjustX || 0); 
} 
if ($(document).height() < y + h2) { 
y = p.top - (y + h2 + 15 - $(document).height()); 
} 
return this.locate(x, y); 
}, 
locateBelow: function (el, adjustY) { 
var p = $(el).offset(); 
return this.locate(p.left, p.top + $(el).outerHeight() + 3 + (adjustY || 0)); 
}, 
locateCenter: function () { 
return this.locate( 
($(window).width() - this.width()) / 2, 
($(window).height() - this.height()) / 2 + $(document).scrollTop() 
); 
} 
});

最后给出一些样式表定义的例子,以及演示效果:
input.dummy { background-image: url(/static/images/combo.gif); background-position: right 12px; background-repeat: no-repeat; cursor: pointer !important; } 
input.dummy:hover, input.dummy:focus { background-image: url(/static/images/combo_hover.gif); } 
#dummydata { position: absolute; z-index: 20; border: 1px solid #a4601e; background-color: #393939; max-height: 200px; overflow: auto; } 
#dummydata a { display: block; color: #ddd; line-height: 25px; text-indent: 3px; text-overflow: ellipsis; } 
#dummydata a:hover { color: #198cef; text-decoration: none; } 
#dummydata.matrix { width: 208px; padding: 5px; } /* matrix 效果 */ 
#dummydata.matrix a { float: left; width: 33%; } 
#dummydata.matrix-large { width: 640px; padding: 5px; } /* matrix-large 效果 */ 
#dummydata.matrix-large a { float: left; width: 25%; } 
#dummydata a.fullwidth { float: none; } 
#dummydata a.delimiter { float: none; width: 100%; height: 10px; visibility: hidden; } 
#dummydata a.selected { color: yellow; }

上面样式定义的效果图

select标签模拟/美化方法采用JS外挂式插件 select标签模拟/美化方法采用JS外挂式插件select标签模拟/美化方法采用JS外挂式插件
html中要做的,只是加几个class修饰

select标签模拟/美化方法采用JS外挂式插件

Javascript 相关文章推荐
JavaScript单元测试ABC
Apr 12 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 #Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 #Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 #Javascript
表单验证的完整应用案例探讨
Mar 29 #Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 #Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 #Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 #Javascript
You might like
php入门学习知识点三 PHP上传
2011/07/14 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP文件操作方法汇总
2015/07/01 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Python print不能立即打印的解决方式
2020/02/19 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
python中四舍五入的正确打开方式
2021/01/18 Python
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
学生处主任岗位职责
2013/12/01 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS