一个漂亮好用的模拟下拉框

点击 这里下载完整源代码

在Web开发中,为了追求界面上的美观,有时候我们需要改变一些控件的呈现外观,通常我们可以通过CSS很方便的达到所需效果,但是对于一些控件缺令Web开发人员非常伤脑筋,比如想要更改下拉框的边框或者下拉箭头的演示,用CSS就非常难实现,这时候只能靠程序代码对系统默认下拉框控件进行模拟,有很多模拟方式都可以达到这一目的,但是本文,笔者对众多方案进行深入研究和权衡后,提出一种性能卓越的解决方案:

请看实际效果:
第一项
请选择
第一项
Truly
Abc
请选择第一项TrulyAbc
1

根据索引值调整选中项:

根据value值调整选中项:


这个函数库的主要方法为
initSelect(id, width, height), 后面两个参数主要用于指定下拉框宽度和高度,可以省略。
setSelectByIndex(id, index)
setSelectByValue(id, value)

注1:使用时需要给页面的body增加οnclick="HideSel(event);"以取消下拉框选择。

注2:有些方法是公用方法,请根据实际情况进行调整,比如gid函数。

如何使用:假设你的页面上面放置了DropDownLoad服务器控件或者是select控件,要达到模拟效果只需使用一行代码:

< script > initSelect('Demo_Select'); script >

而想要选中某个值只需要:

onclick = " setSelectByIndex('Demo_Select', gid('ctrIndex').value); "

或者

onclick = " setSelectByValue('Demo_Select', gid('ctrValue').value); "

非常的简单!

点击这里下载完整源代码(注:由于演示需要本页面内置的代码可能略有不同。)

演示文件使用了一个图片darrow.gif和一个select.css以及一个select.js文件。

select的核心代码如下:

/***********************************************************************
** Author:     Truly
** Web:        http://Truly.cnblogs.com
** LastEdit:    2007.1.16
** Desc:    模拟select控件,实现自定义下拉图片和自定义边框颜色
**            initSelect(id,width,height)进行初始化,
**            setSelectByIndex(id,index)进行某项的选中
**            setSelectByValue(id,value)进行某项的选中
**            body 的 οnclick=HideSel(event),οnlοad=initSelect('下拉框select的id'),兼容IE和FireFox
** Note:    注意修改中的下拉图片地址
**********************************************************************
*/

var  imgPath  =   " http://www.cnblogs.com/images/cnblogs_com/Truly/82187/t_darrow.gif " ;
var  blOut  =   true ;
var  nowOpenedSelectBox  =   null ;
function  gid(id) {    return document.getElementById?document.getElementById(id):null;}
function  initSelect(id, width, height)
{
    
var sel = gid(id);
    
var a = sel.options;
    
var oTable,oTBody, oRow, oCell,oSelect;
    
    
if(!gid('O' + id )) {
        
var strWidth = "";
        
if(width != null)    strWidth=width+"px";
        
else strWidth = gid(id).offsetWidth + "px";
        
        
var strWidth2 = parseInt(strWidth) - 22 + 'px';
        
        
var arr = new Array(a.length);
        
for (var i=0,j=a.length;i<j; i++)
        
{
            arr[i] 
= "" + a[i].text + "' value='" + a[i].value + "'>" + HtmlEncode(a[i].text) + "";
        }

        
// 虽然用insertAdjacentElement可以获得更好的性能,但是由于如果用insertAdjacentElement势必多次使用innerHTML处理,因此就全局来看这里调用1次insertAdjacentElement,反而取得更好的效果。
        sel.insertAdjacentHTML("beforeBegin","" + strWidth + "'>"100%/" cellpadding=0 cellspacing=0 border=0 class='sel_normal' οnclick=/"showHide('O" + id + "')/" οnmοuseοut=/"blOut = false;/">/
        /
            "hidden/" name=/"C_O" + id + "/" id=/"C_O" + id + "/">" + strWidth2 + "' id=/"S_O" + id + "/">下拉选项
/
            "15/">" + imgPath + "' />/
        /
        "O" + id + "/" class=/"select/" onselectstart=/"return false/" οnmοuseοver=/"HoverOptions(event);/" οnmοuseοut=/"OutOptions(event);/" οnclick=/"ClickOptions(event, 'O" + id + "');/">/
            "0/" cellspadding=/"3/" border=/"0/" width=100%>/
            
" + arr.join('') + "/
            /
        
");

    }

    
else
    
{
        oSelect 
= gid('O' + id );
        
var arr = new Array(a.length);
        
for (var i=0,j=a.length;i<j; i++)
        
{
            arr[i] 
= "" + a[i].text + "' value='" + a[i].value + "'>" + a[i].text + "";
        }

        oSelect.parentNode.innerHTML 
= ""O" + id + "/" style=/"position:absolute;/" onselectstart=/"return false/" οnmοuseοver=/"HoverOptions(event);/" οnmοuseοut=/"OutOptions(event);/" οnclick=/"ClickOptions(event, 'O" + id + "');/">/
            "0/" cellspadding=/"3/" border=/"0/" width=100%>/
            
" + arr.join('') + "/
            
";
    }

    
    oSelect 
= gid("O"+id);
    
    sel.style.display
='none';
    
    
// 如果超过8项,下拉框出现滚动条
    if(a.length > 8)
    
{
        oSelect.style.overflowY 
= 'scroll';
        oSelect.style.height 
= 182;
    }

    
else
    
{
        oSelect.style.overflowY 
= 'hidden';
        oSelect.style.height 
= null;
    }

    
    
// 加载原始下拉框的选中项
    if(sel.selectedIndex > -1)
    
{
        setSelectByIndex(id, sel.selectedIndex);
    }

    
else if(sel.options.length > 0)
    
{
        setSelectByIndex(id, 
0);
    }


}


function  showHide(id) {

    HideSel();
    blOut 
= true;
    nowOpenedSelectBox 
= id;
    
var sh={block:"none",none:"block"};
    
if(gid(id).style.display=='') gid(id).style.display='none';
    gid(id).style.display
=sh[gid(id).style.display];
}


function  HideSel(event)
{
    
if(!blOut && nowOpenedSelectBox && gid(nowOpenedSelectBox))
        gid(nowOpenedSelectBox).style.display 
= 'none';
}

function  HoverOptions(event)
{
    blOut 
= true;
    
var obj = event.srcElement ? event.srcElement : event.target;
    
if(obj.tagName=="TD"){
        obj.className
='option_hover';
    }

}

function  OutOptions(event)
{
    blOut 
= false;
    
var obj = event.srcElement ? event.srcElement : event.target;
    
if(obj.tagName=="TD"){
        obj.className
='option_out';
    }
 
}

function  ClickOptions(event, id)
{
    
var obj = event.srcElement ? event.srcElement : event.target;
    
if(obj.tagName=="TD"){
        showHide(obj.parentNode.parentNode.parentNode.parentNode.id);
        gid('S_'
+id).innerHTML=obj.innerHTML;
        gid('C_'
+id).value=obj.value;

        
var sourceObj = gid(id.substr(1));
        sourceObj.selectedIndex 
= obj.parentNode.rowIndex;
        
if (sourceObj.onchange) sourceObj.onchange();
    }
 
}

//  根据指定索引选中下拉框
function  setSelectByIndex(id,index)
{
    
if(index <0) index = 0;
    gid(id).selectedIndex 
= index;
    gid('S_O'
+id).innerHTML=gid(id).options[index].text;
    gid('C_O'
+id).value=gid(id).value;
    
    gid(id).fireEvent('onchange');
}

//  根据指定值选中下拉框
function  setSelectByValue(id, value)  {
    setSelectByIndex(id, getIndex(id, value));
    gid(id).fireEvent('onchange');
}

function  getIndex(id, value)
{
    
var selectBox = gid(id)
    
var arOptions = selectBox.options;
    
var strCompare = new String(value).toLowerCase();
    
var intCompareLen = strCompare.length;
    
var i, j; 
 
    
for (i = 0; i < arOptions.length; i++{
        
if (strCompare == arOptions[i].value.substring(0,intCompareLen).toLowerCase()) {  
            
for(j = 0; j < arOptions.length; j++
                ; 
            
return i;
            
break;
            }

    }

}

//  隐藏和显示某项
function  HideItem(id, index)
{
    gid(
"O" + id).childNodes[0].rows[index].style.display = 'none';    
}

function  ShowItem(id, index)
{
    gid(
"O" + id).childNodes[0].rows[index].style.display = 'block';    
}

function  HtmlEncode(text)
{
    
var re = {'<':'&lt;','>':'&gt;','&':'&amp;','"':'"'};
    for (i in re) text = text.replace(new RegExp(i,'g'), re[i]);
    return text;
}

 

 

http://www.cnblogs.com/Truly/archive/2007/01/16/622015.html

你可能感兴趣的:(一个漂亮好用的模拟下拉框)