您的位置：首页 > 其它
下拉列表选择控件，用于替换原生的 select 控件

2012-12-09 20:46 711 查看
<!DOCTYPE html>
<html>
<head>
<style>
body{
font: 12px "宋体",Arial;
}

/* list start*/
.conditionBox{
position:relative;
display:inline-block;
*display: inline;
*zoom:1;
padding:0 20px 0 10px;
margin:6px 0px 5px 5px;
width:70px;
height:22px;
line-height:22px;

background:url(http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_button.gif) no-repeat 0 -97px;
cursor:pointer;
color:#666;
}
.filterList{
position:absolute;
left:0;
top:21px;
display:none;
border:1px solid #d2d2d2;
background:#FFF;
width:98px;
min-height:30px;
overflow:hidden;
}
.filterList, .filterList li {
margin: 0; padding: 0; list-style: none outside none;
}
.filterList li{
height:22px;
line-height:22px;
margin:0;
padding:0 5px;
float:none;
width:88px;
color:#333;
}
.filterList li:hover{
color:#ffffff;
background:#666666;
}
.filterList .selected{
background:#888888;
color:#ffffff;
}
/* list end*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function List(opstions){
this.container=null;
this.dom=null;
this.listSheet=null;
this.locked = false;
this.items=[];
this.beforeCallbacks=[];
this.afterCallbacks=[];

this.init(opstions);
}
List.prototype={
init:function(opstions){
var host = this;
for(var key in opstions){
host[key] = opstions[key];
}

if(typeof(opstions.container)=="string"){
host.container = document.getElementById(opstions.container);
}

host.dom = document.createElement("div");
host.dom.className = "conditionBox";
host.listSheet = document.createElement("ul");
host.listSheet.className = "filterList";

host.dom.appendChild(document.createElement("span"));
host.dom.appendChild(host.listSheet);
host.container.appendChild(host.dom);

$(host.dom).hover(function(){
$(this).children("ul").fadeIn(200);
},function(){
$(this).children("ul").fadeOut(200);
});

$(host.listSheet).delegate("li","click",function(e){
var itemId = $(this).attr("itemId");
var stopSelected=false;
$.each(host.beforeCallbacks||[],function(index,f){
if(f.call(host)===false){
stopSelected=true;
};
});
if(stopSelected){
return host;
}

host.selectItem(itemId);

$.each(host.afterCallbacks||[],function(index,f){
f.call(host);
});

});

return host;
},
setItems:function(arr){
var host = this;
host.items = arr;

var listSheet = $(host.listSheet).empty();
var defaultItem;
$.each(arr,function(index,itemData){
listSheet.append(host.createListItem(itemData));
if(itemData.selected){
defaultItem = itemData;
}
});

defaultItem && host.selectItem(defaultItem.itemId);
return host;
},
getItems:function(){
var host=this;
return host.items;
},
createListItem:function(itemData){
var host = this;
var listItem = $('<li></li>');
$.each(itemData,function(key,val){
switch(key){
case 'icon':
listItem.prepend($('<img>').attr({src:val,height:16 ,width:16 ,border:"0px"})
.css({'margin':"1px 2px 1px 0px",'vertical-align':'middle'}));
break;
case 'caption':
listItem.append('<span>'+val+'</span>');
break;
default:
listItem.attr(key,val);
break;
}
if(!('caption' in itemData)){
listItem.text(itemData.value);
}

});

return listItem;
},
insertItems:function(items,index){
var host = this;
var listSheet = $(host.listSheet);
var lis =  listSheet.find("li");
if(Object.prototype.toString.call(items)!="[object Array]"){
items = [items];
}
index = parseInt(index);
if(!lis.length||index<0){
index = 0;
}else if(isNaN(index)||index>lis.length-1){
index = lis.length-1;
}

var baseItem = lis.eq(index);
$.each(items||[],function(i,itemData){
baseItem.before(host.createListItem(itemData));
});

Array.prototype.splice.apply(host.items,[index,0].concat(items));
return host;
},
clearItems:function(){
var host = this;
host.items=[];
$(this.dom).find("ul").empty();
return host;
},
removeItems:function(itemids){
var host = this;
var lis = $(this.dom).find("li");
var idsHash={};
if(Object.prototype.toString.call(itemids)!="[object Array]"){
itemids = [itemids];
}
$.each(itemids,function(index,val){
idsHash[val]=1;
});
$.each(lis,function(index,liItem){
liItem = $(liItem);
if(idsHash[liItem.attr("itemId")]){
liItem.remove();
host.items.splice(index,1);
}
});
return host;
},
getCurrentItem:function(){
var host = this;
var lis = $(this.dom).find("li");
var item = {};
$.each(lis,function(index,liItem){
if($(liItem).hasClass('selected')){
item = host.items[index];
return false;
}
});
return item;
},
selectItem:function(itemId){
var host = this;
var listSheet = $(host.listSheet);
var item = listSheet.find("li[itemId='"+itemId+"']");
item.attr("class","selected")
.siblings(".selected").removeAttr("class");
listSheet.hide().prev().html(item.html());
host.value = item.attr("value");
return host;
},
setValue:function(val){
var host = this;
host.value = val;
var listSheet =  $(host.listSheet);
var liItem = listSheet.find("li[value='"+val+"']");
if(liItem.length){
host.selectItem(liItem.eq(0).attr("itemId"));
}else{
listSheet.hide().prev().empty();
}

return host;
},
getValue:function(){
var host = this;
return host.value;
},
setBeforeCallback:function(f){//设置选择选操作前的回调函数，返回 false 将阻止选择操作
var host = this;
if(typeof(f)=="function"){
host.beforeCallbacks.push(f);
}
return host;
},
setAfterCallback:function(f){
var host = this;
if(typeof(f)=="function"){
host.afterCallbacks.push(f);
}
return host;
}
}

$(document).ready(function(){
var mylist = window.mylist = new List({container:'listBox',afterCallbacks:[function(){ console.log(this.value);}]})
.setItems([
{itemId:1,value:100,caption:'hat',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13135493700855.gif"},
{itemId:2,value:200,caption:'man',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13188535899238.jpg",selected:true},
{itemId:3,value:300,caption:'robot',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13188536660394.gif"},
{itemId:'x',value:400,caption:'bottle',icon:"http://images.cnblogs.com/cnblogs_com/ecalf/431722/o_13188536897653.gif"}
]);
});

</script>
</head>

<body>
<div id="listBox" style="border:1px solid black; width:500px; height:80px; padding:20px;">
</div>
</body>
</html>
// function runCode(id){
var obj=document.getElementById(id);
var win = window.open('', "_blank", '');
win.document.open('text/html', 'replace');
win.opener = null;
win.document.write(obj.value);
win.document.close();
}
// ]]>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航
下拉列表选择控件， 用于替换原生的 select 控件

下拉列表选择控件，用于替换原生的 select 控件
