<!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>
