下拉框控件

最新推荐文章于 2021-04-16 20:06:19 发布

Matrix_Designer

最新推荐文章于 2021-04-16 20:06:19 发布

阅读量719

点赞数

分类专栏： JavaScript 文章标签： function null class scroll border div

本文链接：https://blog.youkuaiyun.com/Matrix_Designer/article/details/5923995

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文详细探讨了如何在网页中实现下拉框控件，包括使用function、class进行动态操作，以及解决scroll滚动和border边框样式的问题。通过div元素布局，实现了控件的定制化和交互效果的提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一段JS实现的下拉框控件,和input/text配合可以实现组合框的功能.加上Ajax技术可以实现漂亮的异步加载组合框.代码如下:

    var clickBolder = false;
    var eventSource = null;
    var solveFunction = null;
    function ShowSelect(data,ctrlID,solveFunc)
    {
        var divBodyMenuObj = GetSelectObj();
        
        setClickBolder();
        eventSource = (ctrlID == undefined || ctrlID == null ? event.srcElement : $(ctrlID));
        solveFunction = (solveFunc == undefined || solveFunc == null ? null : solveFunc);
        
        setDivPosition(divBodyMenuObj.id);
        
        FillTable(data,"tblData",0,0);
        
        for(var i=0;i<$("tblData").rows.length;i++)
        {
            $('tblData').rows(i).cells(0).style.display="none";
            $('tblData').rows(i).detachEvent ('onclick', GetData);
            $('tblData').rows(i).attachEvent ('onclick', GetData);
        }
        
        if($("tblData").rows.length > 6)
        {
            $("divPanel").style.height = 6*23;
            $("tblData").style.width = '83%';
        }
        else
        {
            $("divPanel").style.height = $("tblData").rows.length*23;
            $("tblData").style.width = '100%';
        }    
        $('divBodyMenu').detachEvent('onclick', setClickBolder);
        $('divBodyMenu').attachEvent('onclick', setClickBolder);
        document.detachEvent('onclick', hideBodyMenu);
        document.attachEvent('onclick', hideBodyMenu);
        document.detachEvent('onkeydown', CotrolScroll);
        document.attachEvent('onkeydown', CotrolScroll);
        
        divBodyMenuObj.style.display = 'block';
    }
    function setDivPosition(divid)
    {
        var leftpos = 0, toppos = 0;
        var ev = eventSource;
        while(ev.tagName.toUpperCase() != "HTML" && ev.tagName.toUpperCase() != "BODY")
        {
      leftpos += ev.offsetLeft;
      toppos += ev.offsetTop;
      ev = ev.offsetParent;
        }
        $(divid).style.left = leftpos;
        $(divid).style.top = toppos + 17;
    }
    function GetData()
    {
        var otr=event.srcElement;
        while(otr.tagName != "TR")
            otr=otr.parentNode;
            
        var strData=Trim(otr.cells(1).title);
        
        if(solveFunction == null)
        {
            eventSource.value = strData;
        }
        else
        {    
            solveFunction(strData);
        }
        
        hideBodyMenu();
    }
    function setClickBolder()
    {
        clickBolder = true;
    }
    function hideBodyMenu()
    {
        if(clickBolder)
        {
            clickBolder = false;
        }
        else
        {
            $('divBodyMenu').detachEvent('onclick', setClickBolder);
            document.detachEvent('onclick', hideBodyMenu);
            document.detachEvent('onkeydown', CotrolScroll);
            
            $('divBodyMenu').style.display = 'none';
        }
    }
    function GetSelectObj()
    {
        if($('divBodyMenu') != null)
        {
            return $('divBodyMenu');
        }
        
        var strHTML = "";
        var divObj = document.createElement("div");
            
        divObj.id = "divBodyMenu";    
        divObj.style.left=(document.body.clientWidth-220)/2;
        divObj.style.width="100px";
        divObj.style.top="100px";
        divObj.style.backgroundColor="#fffff2";
        divObj.style.display="block";
        divObj.style.height="auto";
        divObj.style.zIndex="999";
        divObj.style.position="absolute";
        divObj.className='layer';
        strHTML += "<div id='divPanel' class='scroll' style='width: 100%; overflow:auto' title='按上下键或滚动鼠标滑轮可控制滑块!' >";
        strHTML += "    <table id='tblData' style='width: 83%' border='0' cellspacing='0' cellpadding='0'>";
        strHTML += "        <tr align='center'>";
        strHTML += "            <td class='rb_b' style='width: 0%'>";
        strHTML += "            </td>";
        strHTML += "            <td class='rb_b' style='width: 100%'>";
        strHTML += "            </td>";
        strHTML += "        </tr>";
        strHTML += "    </table>";
        strHTML += "</div>";
        strHTML += "<input id='iptName' type='hidden' />";
            
        divObj.innerHTML = strHTML;
        document.body.appendChild(divObj);
        
        return divObj;
    }
    function CotrolScroll()
    {
        if($('divBodyMenu') != null && $('divBodyMenu').style.display != "none")
        {
            if(event.keyCode == 40)
            {
                $('divPanel').doScroll('down');
            }
            else if(event.keyCode == 38)
            {
                $('divPanel').doScroll('up');
            }
            else if(event.keyCode == 37)
            {
                $('divPanel').doScroll('left');
            }
            else if(event.keyCode == 39)
            {
                $('divPanel').doScroll('right');
            }
        }  
    }