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

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

posted @ 2012-12-09 20:46 ecalf 阅读(680) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述

公告

昵称： ecalf
园龄： 13年2个月
粉丝： 55
关注： 17

+加关注

2012年12月

日

一

二

三

四

五

六

ECALF'S WEB BOX

Note book about web dev

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

公告

搜索

常用链接

我的标签

随笔分类 (88)

随笔档案 (69)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

ECALF'S WEB BOX

Note book about web dev

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

公告

搜索

常用链接

我的标签

随笔分类 (88)

随笔档案 (69)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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