wangking 写道
下拉框特点:
1.可自定义下拉框的高度和宽度。
2.无需用户写多余代码,就和用原生态的SELECT一样的原理,使用简单。
3.功能强大,在下拉框中增加了extraData DIV层,供用户自定义特殊需求,当然用户也可以不选择使用extraData DIV层,用普通的SELECT即可。
1.可自定义下拉框的高度和宽度。
2.无需用户写多余代码,就和用原生态的SELECT一样的原理,使用简单。
3.功能强大,在下拉框中增加了extraData DIV层,供用户自定义特殊需求,当然用户也可以不选择使用extraData DIV层,用普通的SELECT即可。
下拉框截图:
具体代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框测试</title>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<style type="text/css">
<!--
body {padding:10px;}
* {margin:0; padding:0; font-size:12px;}
ul,li {list-style-type:none;}
.select {width:150px; height:25px; border:1px solid #ccc; padding-left:10px;}
.defaultItem{background:url(__IMAGE__/select_arrow.gif) no-repeat right center white;}
.select span {cursor:pointer; display:block; width:100%; height:100%;overflow:hidden;}
.select table {height:100%;}
.select td {vertical-align:middle;}
.select ul{width:181px;}
.select ul li {cursor:pointer;}
.select .items {overflow-y: scroll; overflow-x: hidden;max-height:148px; height:148px;width:180px; position:absolute;border:1px dashed #ccc; background:#fff;z-index:999;display:none;}
.select .items li {display:block; line-height:25px; padding-left:10px;}
.select .hover,.onhover {background:#ccc;}
.select .extraData{position:absolute;line-height:20px;padding-left:10px; padding-top:5px; padding-bottom:5px;border:1px dashed #ccc;background:white;display:none;}
-->
</style>
<script type="text/javascript">
var isItemHover = 0; // ITEM是否正在HOVER使用,供清楚ONHOVER状态
var delayTime4Select = null; //延迟消失下拉框
var selectUsingObj = ""; //正在使用哪个SELECT,供MOUSE OVER AND OUT时使用
var selectCloseUsing = 0; //是否在执行关闭操作
var isClickSelectTextObj = 0; //是否点击了SELECT控件里的输入框
$(document).ready(function(){
$(".select :text").click(function(){ //当鼠标点击了.select里面的任何一个输入框,则取消掉[鼠标移出焦点后,自动消失事件]
isClickSelectTextObj = 1;
});
$('.defaultItem').click(function(event){ //鼠标点击[请选择],弹出下拉框
if(selectCloseUsing == 1){
return;
}
var parentObj = $(this).parent();
if(selectUsingObj != "" && selectUsingObj != parentObj.attr("idtag")){
$("[idtag='"+selectUsingObj+"']").find('ul.items').hide();
$("[idtag='"+selectUsingObj+"']").find('.extraData').hide();
}
if(selectUsingObj != ""){ //点击事件[执行关闭SELECT]操作
clearTimeout(delayTime4Select);
selectCloseUsing = 1;
var itemsOBJ = parentObj.find('ul.items');;
itemsOBJ.hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
extraOBJ.hide();
selectUsingObj = "";
delayTime4Select = setTimeout(function(){
selectCloseUsing = 0;
isClickSelectTextObj = 0;
},200);
}else{ //点击事件[执行打开SELECT]操作
selectUsingObj = parentObj.attr("idtag");
clearTimeout(delayTime4Select);
var selectWidth = parentObj.width(); //动态设置ul.items宽度
var selectHeight = parentObj.height(); //动态设置ul.items的TOP偏移量
var id = parentObj.attr("idtag");
var hiddenVal = ""; //隐藏域的值,用来显示选中ITEM项
var element=$("#"+id);
if(element.length > 0){
hiddenVal = $("#"+id).val();
}
var itemsOBJ = parentObj.find('ul.items');
itemsOBJ.css("width",selectWidth+11);
itemsOBJ.css({top:parentObj.offset().top+selectHeight,left:parentObj.offset().left});
itemsOBJ.show(); //找到ul.items显示
var extraOBJ = parentObj.find(".extraData");
if(extraOBJ.length > 0){ //SELECT额外数据DIV存在
extraOBJ.css("width",selectWidth+1);
extraOBJ.css({top:parentObj.offset().top+selectHeight+itemsOBJ.height(),left:parentObj.offset().left});
extraOBJ.show();
}
parentObj.find('li').hover(function(){
isItemHover = 1;
$(this).addClass('hover');
$(this).parent().find('li').removeClass('onhover');
}, function(){
$(this).removeClass('hover');
});//li的hover效果
if(isItemHover == 0){
itemsOBJ.find("li").each(function(){
if(hiddenVal == $(this).attr("value")){
$(this).addClass('onhover');
}
});
}
}
});
$('.select,.extraData').mouseover(function(event){
selectCloseUsing = 0;
});
$('.select,.extraData').mouseout(function(event){
selectCloseUsing = 1;
var toElement = null;
if ($.browser.mozilla){ //火狐下不支持toElement
toElement = event.relatedTarget;
}else{
toElement = event.toElement;
}
if($(this)[0].contains(toElement)){ //如果是内部元素,则不执行以下代码
return;
}
var itemsOBJ = null;
if($(this).attr("class") == "select"){
itemsOBJ = $(this).find('ul.items');
}else{
itemsOBJ = $(this).parents("div").find('ul.items');
}
delayTime4Select = setTimeout(function(){
if(selectCloseUsing == 1 && isClickSelectTextObj == 0){
itemsOBJ.hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
if (extraOBJ.length > 0) {
extraOBJ.hide();
}
isItemHover = 0;
selectUsingObj = "";
}
},3000);
});
$('ul.items li').live("click",function(){
selectCloseUsing = 1;
var parentDiv = $(this).parents("div");
parentDiv.find('td').html($(this).html());
var id = parentDiv.attr("idtag");
var element=$("#"+id);
if(element.length > 0){
$("#"+id).val($(this).attr("value"));
}else{
parentDiv.after('<input type="hidden" id="'+id+'" name="'+id+'" value="'+$(this).attr("value")+'"/>');
}
parentDiv.find('ul').hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
if (extraOBJ.length > 0) {
extraOBJ.hide();
}
selectUsingObj = "";
isItemHover = 0;
delayTime4Select = setTimeout(function(){
selectCloseUsing = 0;
isClickSelectTextObj = 0;
},200);
});
});
//给firefox定义contains()方法,ie下不起作用
if(typeof(HTMLElement)!="undefined"){
HTMLElement.prototype.contains=function(obj){
while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
if(obj==this) return true;
obj=obj.parentNode;
}
return false;
};
}
function closeSelect(obj){
selectCloseUsing = 1;
var itemsOBJ = $(obj).parents("div").find('ul.items');;
itemsOBJ.hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
extraOBJ.hide();
selectUsingObj = "";
delayTime4Select = setTimeout(function(){
selectCloseUsing = 0;
isClickSelectTextObj = 0;
},200);
}
</script>
</head>
<body>
<div idtag="name" class="select" style="width:521px;height:50px;">
<span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span>
<ul class="items">
<li value="1111">选项一</li>
<li value="2222">选项二</li>
<li value="3333">选项三</li>
<li value="4444">选项四</li>
<li value="5555">选项五</li>
<li value="6666">选项六</li>
<li value="7777">选项七</li>
<li value="8888">选项八</li>
<li value="9999">选项九</li>
<li value="0000">选项十</li>
</ul>
<div class="extraData">
<input type="text" id="aaa" value="Close"/>
这个DIV层属于扩展层,用户可根据自己需求确定是否需要这个。<input type="button" id="aaa" value="Close" οnclick="closeSelect(this)"/></div>
</div>
<br/><br/><br/>
<!-- SELECT.......[开始] -->
<div idtag="users" class="select">
<span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span>
<ul class="items">
<li value="1">wangking</li>
<li value="2">jiaojiao</li>
</ul>
</div>
<!-- SELECT.......[结束] --><br/><br/><br/>
<input type="text" id="testinput" /><br/><br/><br/>
<input type="text" id="haha" />
</body>
</html>
怎么使用?如下:
INCLUDE CSS AND JS。。。。 THEN。。。
这个是原生态的SELECT:
<select name="users" id="users">
<option value="1">wangking</option>
<option value="2">jiaojiao</option>
</select>
则对应改为:
<div idtag="users" class="select">
<span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span>
<ul class="items">
<li value="1">wangking</li>
<li value="2">jiaojiao</li>
</ul>
</div>
PS: 欢迎共同讨论交流。