软件开发培训班 >> 编程开发 >> JavaScript

基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)

　　本文标签：SELECT,下拉列表

<!doctype html> 
<html> 
<head> 
<meta charset="gbk"> 
<title>用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</title> 
<style> 
/*reset css*/ 
body{font-size:0.8em;letter-spacing:1px;font-family:\5fae\8f6f\96c5\9ed1;line-height:1.8em} 
div,h2,p,fieldset,legend,span,em,dl,dt,dd{margin:0;padding:0} 
input{font:12px/1.5 tahoma,arial,sans-serif;vertical-align:middle} 
h1{font-size:1em;font-weight:normal} 
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} 
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} 
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} 
/*demo css*/ 
#demo{position:relative;width:500px;height:260px;border:1px solid #ccc} 
#demo dl.tips{margin:2px;padding:8px;background:#f2f2f2;line-height:24px} 
#demo dl.tips dt{font-size:14px;font-weight:bolder} 
#demo dl.tips dd{text-indent:24px} 
#demo .demo_b{top:180px;margin-left:-90px;z-index:888} 
#demo .demo_c{top:220px;margin-left:-60px;z-index:777}

.selectitem{position:absolute;top:140px;left:50%;margin-left:-120px;overflow:hidden;width:180px;height:30px;background:#dff0f0;font-size:14px;line-height:30px;filter:alpha(opacity:80);opacity:0.8;cursor:pointer;z-index:999} 
.selectitem dt,.selectitem dd{padding-left:28px;background:transparent url(http://mrthink.net/demo/images/20101031sprite.png) 30px 0 no-repeat} 
.selectitem dt.drop{background-position:0 -30px;} 
.selectitem dt.shrink{background-position:0 0} 
.selectitem dd.hover{background-color:#b6e2e2}

.selectitem dl .tag_news{background-position:0 -60px;color:#bd0000} 
.selectitem dl .tag_it{background-position:0 -90px;color:#0759E0} 
.selectitem dl .tag_reading{background-position:0 -120px;color:#409513} 
.selectitem dl .tag_interests{background-position:0 -150px;color:#EE7D0E} 
.selectitem dl .tag_career{background-position:0 -180px;color:#000382} 
.selectitem dl .tag_living{background-position:0 -210px;color:#733900} 
.selectitem dl .tag_sports{background-position:0 -240px;color:#9B018B}

</style> 
<meta name="author" content="Mr.Think青鸟" /> 
<meta name="keywords" content="Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky" /> 
<meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." /> 
<link rel="pingback" href="http://mrthink.net/xmlrpc.php" /> 
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" /> 
</head> 
<body> 
<h1>Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.</h1> 
<h3>返回文章页:用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</h3> 
 
<div id="demo"> 
<dl class="tips"> 
<dt>用dl模拟实现可自定义样式的SELECT下拉列表</dt> 
<dd>1. 充分考虑用户体验, 快速划过不会触发;</dd> 
<dd>2. 可根据需求自定义各种样式;</dd> 
<dd>3. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.</dd> 
</dl>

<div class="selectitem"> 
<dl> 
<dt class="shrink">请选择标签类别</dt> 
<dd class="tag_news">时事 新闻</dd> 
<dd class="tag_it">技术互联网 新玩意儿 </dd> 
<dd class="tag_reading">读书 音乐 影视</dd> 
<dd class="tag_interests">兴趣 爱好 活动</dd> 
<dd class="tag_career">事业 理财</dd> 
<dd class="tag_living">生活 情感</dd> 
<dd class="tag_sports">娱乐 体育</dd> 
</dl> 
</div> 
<div class="selectitem demo_b"> 
<dl> 
<dt class="shrink">请选择标签类别</dt> 
<dd class="tag_news">时事 新闻</dd> 
<dd class="tag_it">技术互联网 新玩意儿 </dd> 
<dd class="tag_reading">读书 音乐 影视</dd> 
<dd class="tag_interests">兴趣 爱好 活动</dd> 
<dd class="tag_career">事业 理财</dd> 
<dd class="tag_living">生活 情感</dd> 
<dd class="tag_sports">娱乐 体育</dd> 
</dl> 
</div> 
<div class="selectitem demo_c"> 
<dl> 
<dt class="shrink">请选择标签类别</dt> 
<dd class="tag_news">时事 新闻</dd> 
<dd class="tag_it">技术互联网 新玩意儿 </dd> 
<dd class="tag_reading">读书 音乐 影视</dd> 
<dd class="tag_interests">兴趣 爱好 活动</dd> 
<dd class="tag_career">事业 理财</dd> 
<dd class="tag_living">生活 情感</dd> 
<dd class="tag_sports">娱乐 体育</dd> 
</dl> 
</div> 
</div> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script> 
/******************************* 
* @author Mr.Think 
* @author blog http://mrthink.net/ 
* @2010.10.31 
* @可自由转载及使用,但请注明版权归属 
*******************************/ 
;(function($){ 
$.fn.extend({ 
iSelect: function(options){ 
var iset = { 
name: $(.selectitem), //容器 
select: $(.selectitem>dl), //dl列表 
dropCss: drop, //收藏状态dt的样式 
shrinkCss: shrink, //展开状态dt的样式 
hoverCss: hover, //鼠标划过dd时的样式 
clearTime: 100, //允许用户快速划过不触发的时间(ms) 
dropTime: 100, //展开时间(ms) 
shrinkTime: 100 //收缩时间(ms) 
} 
options = options || {}; 
$.extend(iset, options); 
var mainHeight = iset.name.height();//容器高度 
var selectHeight = iset.select.height(); //dl实际高度 
var curTxt = iset.select.find(dt).html(); //dt默认html内容 
var self = null; 
var hoverElem = null; //避免用户快速划过时触发事件 
iset.name.each(function(){ 
$(this).hover(function(){ 
self = this; 
hoverElem = setTimeout(function(){ 
$(self).stop(true, false).animate({ //鼠标划过时,展开dl 
height: selectHeight 
}, iset.dropTime); 
if ($(self).find(dt).html() == curTxt) { //判断是否有选择下拉列表,若无则改变dt样式 
$(self).find(dt).attr(class, iset.dropCss); 
} 
//dd的鼠标事件 
$(self).find(dd).mouseover(function(){ 
$(this).addClass(iset.hoverCss).siblings().removeClass(iset.hoverCss); 
}).mousedown(function(){ //鼠标点击时取值并赋给dt 
$(self).find(dt).html($(this).html()).attr(class, $(this).attr(class)); 
$(self).stop(true, false).animate({ 
height: mainHeight 
}, iset.shrinkTime); 
}).removeClass(iset.hoverCss); 
}, iset.clearTime); 
}, function(){ 
//鼠标移出后触发的事件 
clearTimeout(hoverElem); 
$(self).stop(true, false).animate({ 
height: mainHeight 
}, iset.shrinkTime); 
if ($(self).find(dt).html() == curTxt) { 
$(self).find(dt).attr(class, iset.shrinkCss); 
} 
}); 
}) 
} 
}) 
})(jQuery); 
//使用方法 
$(function(){ 
//默认调用 
$(#demo).iSelect();

//传入自定义值的调用 方法 
// $(.demo_a)({ 
// name:$(yourcss), 
// select: $(.yourcss>dl), 
// dropCss: yourdrop, 
// shrinkCss: yourshrink, 
// hoverCss: yourhover, 
// clearTime: 200, 
// dropTime: 200, 
// shrinkTime: 200 
// }); 
}) 
</script> 
</body> 
</html>

技术文章快速查找

javascript标签在页面中的位置探讨

纯js写的分页表格数据为json串

js iframe跨域访问(同主域/非同主域)分别深入介绍

简单实例处理url特殊符号&处理(2种方法)

Chrome中JSON.parse的特殊实现

js中的window.open返回object的错误的解决方法

script标签的 charset 属性使用说明

event.keyCode键码值表附只能输入特定的字符串代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建