jquery模仿select下拉列表效果代码
通过dl模拟实现select下拉列表. 其实这是项目中要常用到的一个效果, 于是, 在之前写的基础上封装成了一个插件. 可自定义样式, 可防止用户本意划过时触发事件.
具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或google.
另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表
<style>
#demo{position:relative;width:500px;height:300px;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 dl.tips dd input{padding:5px 5px;border:1px solid #444;width:200px;}
.selecttagbox{position:absolute;top:170px;left:50%;margin-left:-120px;z-index:999}
.selectitem{overflow:hidden;width:180px;height:30px;background:#dff0f0;font-size:14px;line-height:30px;filter:alpha(opacity:80);opacity:0.8;cursor:pointer}
.selectitem dt,.selectitem dd{padding-left:28px;background:transparent url(yun_qi_img/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}#demo .demo_b{top:210px;margin-left:-90px;z-index:888}
#demo .demo_c{top:250px;margin-left:-60px;z-index:777}
</style><div id="demo">
<dl class="tips">
<dt>用dl模拟实现可自定义样式的select下拉列表</dt>
<dd>1. 充分考虑用户体验, 快速划过不会触发;</dd>
<dd>2. 可根据需求自定义各种样式;</dd>
<dd>3. 考虑后台程序,预留传值接口;</dd>
<dd>4. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.</dd>
<dd><strong>下拉列表的值传到这儿</strong><input id="selectval" /><!--下拉列表的值传到这儿--></dd>
</dl><div class="selecttagbox">
<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><div class="selecttagbox demo_b">
<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><div class="selecttagbox demo_c">
<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></div>
<!--demo end-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>;(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)
selectval: null//选择的值传到此元素中
}
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').mouseo教程ver(function(){
$(this).addclass(iset.hovercss).siblings().removeclass(iset.hovercss);
}).mousedown(function(){ //鼠标点击时取值并赋给dt
$(self).find('dt').html($(this).html()).attr('class', $(this).attr('class'));
//为表单传值
if(iset.selectval){
iset.selectval.val($(this).html());
}
$(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({selectval:$('input#selectval')});
//传入自定义值的调用 方法
// $('.demo_a')({
// name:$('yourcss'),
// select: $('.yourcss>dl'),
// dropcss: 'yourdrop',
// shrinkcss: 'yourshrink',
// hovercss: 'yourhover',
// cleartime: 200,
// droptime: 200,
// shrinktime: 200,
// selectval:$('input')
// });
})
</script>