logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

DropDownList自定义样式（实用）

 悟静 2011-11-08
  效果图：

     

     刚开始想实现这个效果，发现DropDownList控件自己没有这个功能。于是百度了一下，资料挺多的，就是没有我想要的。最后没办法，只好在某个大型的门户网站上扣了，终于扣下来了。在次跟大家共享一下。

     一共需要另外的两个文件，一个Combox.js和一个Combox.css文件。其代码在下边，另外需要在aspx页面的<head></head>里加入

<link href="http://www.cnblogs.com/css/page/Combox.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript" src="/js/Combox.js"></script>

两行代码，一行是引入css样式表，一行是引入js文件，文件路径可以自定义。此外，还需要写一段js代码，注册一下DropDownList控件。代码如下：

<script language="javascript" type="text/javascript">
//注册select

//DropDownList1为DropDownList控件的Id,300为线框显示的宽度，280为箭头显示的宽度
new Combox("DropDownList1",300,280);
</script>

 

    

ok,这样下来，就可以实现上图的效果了。

 

Combox.js文件代码：

 



Function.prototype.BindForEvent = function()
{
    var __m = this, object = arguments[0], args = new Array();
    for(var i = 1; i < arguments.length; i++)
    {
        args.push(arguments[i]);
    }
    
    return function(event) 
    {
        return __m.apply(object, [( event || window.event)].concat(args));
    }
};

var Class = {
  create: function() {
    return function() {
      this.init.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) 
{
    for (var property in source) 
    {
        destination[property] = source[property];
    }
    return destination;
}

function Offset(e)
{
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight-2;
    var f ='';
    
    while(e=e.offsetParent)
    {
        f+= (e.id || e.className || e.tagName) +e.offsetTop + "---";
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    //alert(f);
    return {top : t,left : l,width : w,height : h}
}

function $()
{
    var target = arguments[0];
    if(typeof target == "object")
    {
        return target;
    }
    return document.getElementById(target);
}
var Comboxs = [];
var Combox = Class.create();
Combox.prototype = {
    DrpID:'',
    offset:null,
    DrpList:null,
    SetHeight:22, //高
    box:null,
    input:null,
    Btn:null,
    Optionsbox:null,
    seledOption:null,
    seledText:'',
    seledValue:'',
    bJoin:false,//是否联动
    JoinID:null, //联动对象ID
    w:0,
    inputW:0,
    s:1, // 0  编辑页使用  1列表页显示
    NumOption:0,
    init:function(objID,w,inputW,s){
        this.s = s || 0;
        this.DrpID =objID
        this.DrpList = $(objID);
        if( !this.DrpList) return;
        this.w = w;
        this.inputW = inputW;
        //this.offset = Offset(this.DrpList);
        Comboxs.push([this.DrpID,this]);
        if(this.DrpList.getAttribute("joinDrp") != null && this.DrpList.getAttribute("joinDrp")!= "")
        {
            this.bJoin = true;
            this.JoinID = this.DrpList.getAttribute("joinDrp");
        }
        this.CreateBox();
    },
    CreateBox:function()
    {
        var Div = document.createElement("DIV");
        if(this.s == 0 )
        {
            Div.className = "DrpBox_normal";
        }
        else
        {
            Div.className = "sDrpBox_normal";
        }
        Div.setAttribute("id",this.DrpList.id+"_"+"BOX");
        Div.style.width=this.w+"px";
        if(this.DrpList.style.display == 'none' )
        {
           Div.style.display = 'none'; 
        }
        
        this.DrpList.style.display = 'none';
        this.box = Div;
        
        var parentobj = this.DrpList.parentNode;
        if( !parentobj  ) return;
        parentobj.insertBefore(Div,this.DrpList);
        this.CreateInput();
        this.CreateButton();
        this.CreateOptions();
    },
     CreateInput:function()
     {
        var Div = document.createElement("DIV");
        //Div.style.position ="absolute";
        Div.setAttribute("id",this.DrpList.id+"_"+"INPUT");
        Div.className = "DrpInput_normal";
        Div.style.width =this.inputW+"px";
        Div.style.overflow ='hidden';
        this.box.appendChild(Div);
        this.input = Div;
        this.input.onmouseout = this.HidOptionBoxOutInput.BindForEvent(this.input,this);
   },
   CreateButton:function()
   {
        var Div = document.createElement("DIV");
        Div.className = "DrpBtn";
        Div.setAttribute("id",this.DrpList.id+"_"+"Btn");
        this.Btn = Div;
        this.box.appendChild(Div);
        this.Btn.onmouseout = this.HidOptionBoxOutInput.BindForEvent(this.Btn,this);
   },
   CreateOptions:function()
   {
        this.Optionsbox = null;
        var Div = document.createElement("DIV");
        Div.style.display = 'none';
        Div.style.width =this.w+"px";
        
        Div.className = "DrpOptionsBox";
        Div.setAttribute("id",this.DrpList.id +"_"+ "Optionsbox");
        
        if( ! browser.msie)
        {
            var f = Offset(this.box);
            Div.style.top = f.top+document.documentElement.scrollTop + this.SetHeight +"px";
            Div.style.left = f.left+"px";
        }
        var parentobj = this.DrpList.parentNode;
        if( !parentobj  ) return;
        parentobj.insertBefore(Div,this.DrpList);
        this.Optionsbox = Div;
        var Nums = this.DrpList.options.length;
        this.NumOption = Nums;
        
        for(var i=0;i< Nums;i++)
        {
            var DivOp = document.createElement("DIV");
            DivOp.innerHTML = this.DrpList.options[i].innerHTML;
            DivOp.setAttribute("value",this.DrpList.options[i].value);
            DivOp.setAttribute("index",i);
            DivOp.style.cursor = "default";
            if(this.DrpList.options[i].selected )
            {
                 DivOp.setAttribute("selected","true");
                 DivOp.className = "DrpOptionsSeled";
                 this.seledOption = DivOp;
                 this.seledText =DivOp.innerHTML;
                 this.seledValue = DivOp.getAttribute("value");
                 this.input.innerHTML = this.seledText;
            }
            else
            {
                DivOp.setAttribute("selected","false");
                DivOp.className = "DrpOptions";
            }
            Div.appendChild(DivOp);
            DivOp.onmouseover = this.Option_onMouseover.BindForEvent(DivOp,DivOp,this);
            DivOp.onmouseout = this.Option_onMouseout.BindForEvent(DivOp,DivOp,this);
            DivOp.onclick = this.Option_onClick.BindForEvent(DivOp,DivOp,this);
        }
        if( Nums  > 6 )
        {
            Div.style.overflow="auto";
            Div.style.height= this.SetHeight*6+"px";
        }
        else
        {
            Div.style.height =this.SetHeight*Nums +"px";
        }
        this.Optionsbox.onmouseout = this.HidOptionBoxEnt.BindForEvent(this.box,this);
        this.input.onclick = this.ShowOptionBox.BindForEvent(this.input,this);
        this.Btn.onclick = this.ShowOptionBox.BindForEvent(this.input,this);
   },
   Option_onMouseover:function()
   {
       var obj = arguments[1];
        if( obj.className == "DrpOptionsSeled" )
        {
            return;
        }
        else
        {
           obj.className = "DrpOptionsOver"; 
        }
   },
   Option_onMouseout:function()
   {
       var obj = arguments[1];
        if( obj.className == "DrpOptionsSeled" )
        {
            return;
        }
        else
        {
           obj.className = "DrpOptions"; 
        }
   },
   CloseCombox:function(ojbID)
   {
        for(var i=0;i<Comboxs.length;i++)
        {
            if(Comboxs[i][0] == ojbID )
            {
                continue;
            }
            if( Comboxs[i][1].Optionsbox.style.display == '')
            {
                Comboxs[i][1].Optionsbox.style.display ='none';
            }
        }
   },
   Option_onClick:function()
   {
        var opt = arguments[1];
        var obj = arguments[2];
        
        var sel = opt.getAttribute("selected");
        if( sel == 'false' )
        {
            obj.seledOption.setAttribute("selected","false");
            obj.seledOption.className = "DrpOptions";
            opt.setAttribute("selected","true");
            opt.className = "DrpOptionsSeled";
            obj.seledOption = opt;
            obj.seledText =opt.innerHTML;
            obj.seledValue = opt.getAttribute("value");
            obj.input.innerHTML = obj.seledText;
        }
        var i = parseInt(opt.getAttribute("index"));
        obj.DrpList.options[i].selected = true;
        obj.HidOptionBox(obj);
        if( sel == 'false' )
        {
            if( obj.DrpList.onchange)
            {
                obj.DrpList.onchange();
            }
            if(obj.bJoin)
            {
                for(var i=0;i<Comboxs.length;i++)
                {
                    if ( obj.JoinID == Comboxs[i][0] )
                    {
                        Comboxs[i][1].CreateOptions();
                        break;
                    }
                }
            }
        }
        if(obj.DrpList.onblur)
        {
            obj.DrpList.onblur(obj.DrpList);
        }
   },
   ShowOptionBox:function()
   {
        var obj = arguments[1];
        obj.CloseCombox(obj.DrpID); //关闭打开得
        if( obj.Optionsbox.style.display == '')
        {
           obj.HidOptionBox(obj);
            if(obj.DrpList.onblur)
            {
                obj.DrpList.onblur(obj.DrpList);
            }
           return;
        }
        obj.Optionsbox.style.display = '';
        if(obj.DrpList.onfocus)
        {
            obj.DrpList.onfocus(obj.DrpList);
        }
        if(this.s == 0 )
        {
            obj.box.className ="DrpBox_focus";
        }
   },
   HidOptionBox:function()
   {
         var obj = arguments[0];
        obj.Optionsbox.style.display = 'none';
        if(this.s == 0 )
        {
            obj.box.className ="DrpBox_normal";
        }
   },
   IsOptionsboxUp:function()
   {
        alert(1);
   },
   HidOptionBoxEnt:function()
   {
         var obj = arguments[1];
         var evt = arguments[0];
         
         var boxOffset = Offset(obj.box);
         var left =boxOffset.left;
         var tops =boxOffset.top;
         var w = boxOffset.width;
         var h =obj.SetHeight*obj.NumOption;
         var scrlTop = document.documentElement.scrollTop;

         if(obj.NumOption > 6 )
         {
            h=obj.SetHeight*6;
         }
         if(evt.clientX > left && evt.clientX < (left+w) && evt.clientY+scrlTop > tops+2 && evt.clientY+scrlTop < (tops+h+obj.SetHeight ))
         {
            return;
         }
        obj.Optionsbox.style.display = 'none';
         if(obj.s == 0 )
         {
            obj.box.className ="DrpBox_normal";
        }
        if(obj.DrpList.onblur)
        {
            obj.DrpList.onblur(obj.DrpList);
        }
   },
   HidOptionBoxOutInput:function()
   {
        var obj = arguments[1];
         var evt = arguments[0];
         
         var boxOffset = Offset(obj.box);
         var left =boxOffset.left;
         var tops =boxOffset.top;
         var w = boxOffset.width;
         var h = boxOffset.height;
         var scrlTop = document.documentElement.scrollTop;
         if(evt.clientX > left && evt.clientX < (left+w) && evt.clientY+scrlTop > tops+5 ){
            return;
         }
         obj.Optionsbox.style.display = 'none';
         if(obj.s == 0 ){
            obj.box.className ="DrpBox_normal";
        }
        if(obj.DrpList.onblur){
            obj.DrpList.onblur(obj.DrpList);
        }
   }
};
var userAgent = navigator.userAgent.toLowerCase();
var browser = {
    opera: /opera/.test(userAgent),
    msie: /msie/.test(userAgent) && !/opera/.test(userAgent),
    mozilla: /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
};
function getEvent(){
    return window.event ? window.event:getEvent.caller.arguments[0];
};
function  ResizeWin(){
    if( !browser.msie){
        for(var i=0;i<Comboxs.length;i++){
                Comboxs[i][1].Optionsbox.style.top = Offset(Comboxs[i][1].box).top + 22+"px";
                Comboxs[i][1].Optionsbox.style.left = Offset(Comboxs[i][1].box).left+"px";
        }
    }
}
if(!window.Event){
    var Event = new Object();
}
Object.extend(Event,{
    add:function(element,name,observe,userCapture){
        if (name == 'keypress' &&
        (navigator.appVersion.match(/Konqueror|Safari|KHTML/)
        || element.attachEvent))
      name = 'keydown';
      userCapture = userCapture || false;
      if(element.addEventListener){
        element.addEventListener(name,observe,userCapture);
     }
     else if(element.attachEvent){
        element.attachEvent('on'+ name,observe);
     }
}

})
Event.add(window,"resize",ResizeWin,true)

 

Combox.css文件代码如下：

 


.DrpBox_normal
{
    background:url(/images/folder/bg_input.gif) repeat-x bottom; /*图片路径可以自定义*/
    background-color:#ffffff;
    height:22px;
    line-height:22px;
    border:1px solid #afdae6;
    margin-left:2px;
    color:#4d4b4b;
    overflow:hidden;
    
}
.DrpBox_focus
{
    background:url(/images/folder/bg_input.gif) repeat-x bottom;  /*图片路径可以自定义*/
    background-color:#ffffff;
    height:20px;
    line-height:20px;
    border:1px solid #afdae6;
    border-left:4px solid #33cc00;
    color:#4d4b4b;
    overflow:hidden;
}
.DrpBtn
{
    width:20px;
    height:22px;
    line-height:22px;
    float:left; 
    background-image:url(/images/folder/ico_drp_btn.gif);  /*图片路径可以自定义*/

    background-repeat:no-repeat; 
    background-position:center;
}
.DrpOptionsBox
{
    margin-left:2px;
    border:solid 1px #afdae6;
    position:absolute; 
    background-color:White;
    clear:both;
    height:22px;
    line-height:22px;
}
.DrpOptions
{
    text-indent:2px;
    height:22px;
    line-height:22px;
    clear:both;
    overflow:hidden;
    clear:both;
}
.DrpOptionsSeled
{ 
    text-indent:2px;
    background-color:#afdae6;
    height:22px; 
    line-height:22px;
    clear:both;
}
.DrpOptionsOver
{
    text-indent:2px; 
    background-color:#d7ecf2;
    height:22px; 
    line-height:22px;
    clear:both;
}

.sDrpBox_normal
{
    margin-left:2px;
    background-color:#ffffff;
    height:22px;
    line-height:22px;
    border:1px solid #afdae6;
    border-left:1px solid #afdae6;
    color:#4d4b4b;
    overflow:hidden;
}

.DrpInput_normal
{
    text-indent:4px;
    background-color:#ffffff;
    height:22px;
    line-height:22px;
    color:#4d4b4b;
    overflow:hidden;
    float:left;
}

 

用到的两个图片：    


    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 悟静 > 《.net和asp.net》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多