用dl模拟实现可自定义样式的SELECT下拉列表
用dl模拟实现可自定义样式的SELECT下拉列表:1. 充分考虑用户体验, 快速划过不会触发;
2. 可根据需求自定义各种样式;
3. 考虑后台程序,预留传值接口;
4. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.
当前位置：编程学习 > JS >>
1. 充分考虑用户体验, 快速划过不会触发;
2. 可根据需求自定义各种样式;
3. 考虑后台程序,预留传值接口;
4. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.
1. 充分考虑用户体验, 快速划过不会触发;
2. 可根据需求自定义各种样式;
3. 考虑后台程序,预留传值接口;
4. 如果你有兴趣, 你还可以改进成即可输入值又可下拉的下拉列表.
答案：<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>用dl模拟实现可自定义样式的SELECT下拉列表@Mr.Think</title>
<style>
body,h1,h2,h3,h4,h5,h6,div,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{_overflow:auto;_height:100%;margin:0 auto;}
html{_overflow:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%}
address,cite,dfn,em,var{font-style:normal}#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(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}
#demo .demo_b{top:210px;margin-left:-90px;z-index:888}
#demo .demo_c{top:250px;margin-left:-60px;z-index:777}
</style>
</head>
<body>
<div id="d_head">
<!--DEMO start-->
<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>
/*******************************
* @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)
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').mouseover(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')})
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思