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

分类：Javascript| 发布：camnprbubuol| 查看： | 发表时间：2011/4/6

运行代码:

<!doctype html> <html> <head> <FCK: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(upload/2012/3/201203232008361756.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> <FCK:meta name="author" content="Mr.Think青鸟" /> <FCK:meta name="keywords" content="Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky" /> <FCK: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><a href="http://mrthink.net/" _fcksavedurl="http://mrthink.net/">Mr.Think的个人博客</a> @专注前端技术,热爱PHP,崇尚简单生活.</h1> <h3>返回文章页:<a href="http://mrthink.net/jquery-plugin-iselect/" _fcksavedurl="http://mrthink.net/jquery-plugin-iselect/">用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</a></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>

效果图：

http://www.jb51.net/article/25218.htm

365据说看到好文章不转的人，服务器容易宕机！

标签：JS Widget Html jQuery

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/304.html

jQuery 90有用的滑球插件教程(90 Useful jQuery Slider Plugins(2011-5-4 9:8:6)
jQuery插件keyfilter实现过滤字母、数字或特殊字符等(2011-4-26 10:49:29)
js实现弹出地区选择效果-仿51job地区选择特效(2011-4-12 14:46:32)
用js实现select的美化(2011-4-6 11:21:8)
JS触发select控件显示下拉菜单(2011-4-6 11:7:18)
jQuery formValidator插件inputValidator,compareValida(2011-4-2 15:39:6)
使用Google CDN服务提供的jQuery库(2011-3-14 19:6:23)
jQuery 1.5发布 Ajax模块重写(2011-2-18 9:55:15)
Web开发人员必备的20款超赞的jQuery插件(2011-2-18 9:46:44)
JQuery的html(data)方法与<script>脚本块的解决方法(2011-2-14 15:45:5)

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

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

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

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱