网站地图
【www.gdgbn.com--jquery】
jquery模仿select下拉列表效果代码
通过dl模拟实现select下拉列表. 其实这是项目中要常用到的一个效果, 于是, 在之前写的基础上封装成了一个插件. 可自定义样式, 可防止用户本意划过时触发事件.
具体思路就不说了,比较常规, 代码中也有注释. 使用方法也不费话了, 就是一个简单的全局函数封装, 不懂的看下源码中注释或google.
另外, 有兴趣的朋友,可以尝试在本插件基础上改一个可输入的下拉列表
用dl模拟实现可自定义样式的select下拉列表
1. 充分考虑用户体验, 快速划过不会触发;
2. 可根据需求自定义各种样式;
3. 考虑后台程序,预留传值接口;
4. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.
下拉列表的值传到这儿
- 请选择标签类别
- 时事 新闻
- 技术互联网 新玩意儿
- 读书 音乐 影视
- 兴趣 爱好 活动
- 事业 理财
- 生活 情感
- 娱乐 体育
- 请选择标签类别
- 时事 新闻
- 技术互联网 新玩意儿
- 读书 音乐 影视
- 兴趣 爱好 活动
- 事业 理财
- 生活 情感
- 娱乐 体育
- 请选择标签类别
- 时事 新闻
- 技术互联网 新玩意儿
- 读书 音乐 影视
- 兴趣 爱好 活动
- 事业 理财
- 生活 情感
- 娱乐 体育
<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>