可输入文本的下拉框

jsntghf

浏览: 2542448 次
性别:
来自: 苏州

最近访客更多访客>>

samhunglv

loginboot

yongjiucui

diabloaaa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

ComboBox 可输入文本的下拉框

<html>
  <head>
    <title>ComboBox Demo</title>
    <style type="text/css">
      body           {font-size:9pt;font-family:verdana;}
      button         {cursor:hand;border:1px solid black;font-family:arial;font-size:9pt;}
      a              {color:red;}
      a:hover        {color:blue}
      .combo-button {
        cursor: pointer;
        cursor: expression("hand");
        height: 20px;
        border: 1px solid rgb(120,172,255);
        background: rgb(234,242,255);
        width: 14px;
      }
      .combo-hilite {
        cursor:    pointer;
        cursor:    expression("hand");
        background:   rgb(234,242,255);
        border:    1px solid rgb(120,172,255);
        color:    black;
        font-family: verdana;
        font-size:   9pt;
      }
      .combo-item    {
        cursor:    pointer;
        cursor:    expression("hand");
        background:   white;
        border:    1px solid white;
        color:    black;
        font-family: verdana;
        font-size:   9pt;
      }
      .combo-input   {
        border: 1px solid rgb(120,172,255) !important;
        width: 138px !important;
      }
      .combo-list-width {
        width:153px
      }
      .combo-list    {
        border:   1px solid black;
        width:    153px;
        height:   100px;
        overflow-y: auto;
        scrollbar-base-color:   rgb(234,242,255);
        scrollbar-highlight-color: rgb(234,242,255);
        scrollbar-3dlight-color: rgb(120,172,255);
        scrollbar-darkshadow-color: rgb(120,172,255);
        scrollbar-shadow-color:   rgb(234,242,255);
        scrollbar-face-color:   rgb(234,242,255);
        scrollbar-track-color:   white;
        scrollbar-arrow-color:   black;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      Global_run_event_hook = true;
      Global_combo_array     = new Array();
      Global_ie = document.all != null;
      Array.prototype.remove=function(dx)
      {
        if(isNaN(dx)||dx>this.length){self.status='Array_remove:invalid request-'+dx;return false}
        for(var i=0,n=0;i<this.length;i++)
        {
          if(this[i]!=this[dx])
          {
            this[n++]=this[i]
          }
        }
        this.length-=1
      }
      function ComboBox_make()
      {
        var bt,nm;
        nm = this.name+"txt";

        this.txtview = document.createElement("INPUT")
        this.txtview.type = "text";
        this.txtview.name = nm;
        this.txtview.id = nm;
        this.txtview.className = "combo-input"
        this.view.appendChild(this.txtview);

        this.valcon = document.createElement("INPUT");
        this.valcon.type = "hidden";
        this.view.appendChild(this.valcon)

        var tmp = document.createElement("IMG");
        tmp.src = "___";
        tmp.style.width = "1px";
        tmp.style.height = "0";
        this.view.appendChild(tmp);

        var tmp = document.createElement("BUTTON");
        tmp.className = "combo-button";
        if(Global_ie){tmp.innerHTML = '<span style="font-family:webdings;font-size:8pt">6</span>';}
        else{tmp.style.height='24px'}

        this.view.appendChild(tmp);

        if(Global_ie)
        {
          tmp.onfocus = function ()
          {
            this.blur();
          };
        }
        tmp.onclick = new Function ("", this.name + ".toggle()");
      }
      function ComboBox_choose(realval,txtval)
      {
        this.value          = realval;
        var samstring = this.name+".view.childNodes[0].value='"+txtval+"'"
        window.setTimeout(samstring,1)
        this.valcon.value   = realval;
      }
      function ComboBox_mouseDown()
      {
        var obj,len,el,i;
        el    = window.event.srcElement
        elcl = el.className
        if(elcl.indexOf("combo-")!=0)
        {
          len=Global_combo_array.length
          for(i=0;i<len;i++)
          {
            curobj = Global_combo_array[i]
            if(curobj.opslist)
            {
              curobj.opslist.style.display='none'
            }
          }
        }
      }
      function ComboBox_handleKey()
      {
        var key,obj,eobj,el,strname;
        eobj = window.event;
        key   = eobj.keyCode;
        el    = eobj.srcElement
        elcl = el.className
        if(elcl.indexOf("combo-")==0)
        {
          if(elcl.split("-")[1]=="input")
          {
            strname = el.id.split("txt")[0]
            obj = window[strname];

            obj.expops.length=0
            obj.update();
            obj.build(obj.expops);
            if(obj.expops.length==1&&obj.expops[0].text=="(No matches)"){}
            else{obj.opslist.style.display='block'}
            obj.value = el.value;
            obj.valcon.value = el.value;
          }
        }
      }
      function ComboBox_update()
      {
        var opart,astr,alen,opln,i,boo;
        boo=false;
        opln = this.options.length
        astr = this.txtview.value
        alen = astr.length
        if(alen==0)
        {
          for(i=0;i<opln;i++)
          {
            this.expops[this.expops.length]=this.options[i];boo=true;
          }
        }
        else
        {
          for(i=0;i<opln;i++)
          {
            opart=this.options[i].text.substring(0,alen)
            if(astr==opart)
            {
              this.expops[this.expops.length]=this.options[i];boo=true;
            }
          }
        }
        if(!boo){this.expops[0]=new ComboBoxItem("(No matches)","")}
      }

      function ComboBox_remove(index)
      {
        this.options.remove(index)
      }
      function ComboBox_add()
      {
        var i,arglen;
        arglen=arguments.length
        for(i=0;i<arglen;i++)
        {
          this.options[this.options.length]=arguments[i]
        }
      }
      function ComboBox_build(arr)
      {
        var str,arrlen
        arrlen=arr.length;str=''
        str +='<table class="combo-list-width" cellpadding=0 cellspacing=0>'

        for(var i=0;i<arrlen;i++)
        {
          str += '<tr>'
          str += '<td class="combo-item" onClick="'+this.name+'.choose(\''+arr[i].value+'\',\''+arr[i].text+'\');'+this.name+'.opslist.style.display=\'none\';"'
          str += 'onMouseOver="this.className=\'combo-hilite\';" onMouseOut="this.className=\'combo-item\'" > '+arr[i].text+' </td>'
          str +='</tr>'
        }
        str +='</table>'

        if(this.opslist){this.view.removeChild(this.opslist);}

        this.opslist = document.createElement("DIV")
        this.opslist.innerHTML=str;
        this.opslist.style.display='none';
        this.opslist.className="combo-list"
        this.opslist.onselectstart=returnFalse;
        this.view.appendChild(this.opslist);
      }
      function ComboBox_toggle()
      {
        if(this.opslist)
        {
          if(this.opslist.style.display=="block")
          {
            this.opslist.style.display="none"
          }
          else
          {
            this.update();
            this.build(this.options);
            this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
            this.opslist.style.display="block"
          }
        }
        else
        {
          this.update();
          this.build(this.options);
          this.view.style.zIndex = ++ComboBox.prototype.COMBOBOXZINDEX
          this.opslist.style.display="block"
        }
      }
      function ComboBox()
      {
        if(arguments.length==0)
        {
          self.status="ComboBox invalid - no name arg"
        }
        this.name      = arguments[0];
        this.par       = arguments[1]||document.body
        this.view      = document.createElement("DIV");
        this.view.style.position='absolute';
        this.options   = new Array();
        this.expops    = new Array();
        this.value     = ""
        this.build   = ComboBox_build
        this.make    = ComboBox_make;
        this.choose = ComboBox_choose;
        this.add     = ComboBox_add;
        this.toggle = ComboBox_toggle;
        this.update = ComboBox_update;
        this.remove = ComboBox_remove;
        this.make()
        this.txtview = this.view.childNodes[0]
        this.valcon   = this.view.childNodes[1]

        this.par.appendChild(this.view)

        Global_combo_array[Global_combo_array.length]=this;
        if(Global_run_event_hook){ComboBox_init()}
      }
      ComboBox.prototype.COMBOBOXZINDEX = 1000
      function ComboBox_init()
      {
        document.body.attachEvent("onkeyup",ComboBox_handleKey)
        document.body.attachEvent("onmousedown",ComboBox_mouseDown)
        Global_run_event_hook = false;
      }
      function returnFalse(){return false}
      function ComboBoxItem(text,value)
      {
        this.text   = text;
        this.value = value;
      }

    </script>
    <script type="text/javascript">
      dm = new ComboBox("dm")
      dm.add(
      new ComboBoxItem("1", 1),
      new ComboBoxItem("2", 2),
      new ComboBoxItem("3", 3),
      new ComboBoxItem("4", 4),
      new ComboBoxItem("5", 5),
      new ComboBoxItem("6", 6),
      new ComboBoxItem("7", 7),
      new ComboBoxItem("8", 8)
    )
    </script>
  </body>
</html>

效果图：

demo.rar (2.5 KB)
下载次数: 18

分享到：

ruby1.9的中文问题 | 列出所有的控制器以及方法名

2011-09-28 13:14
浏览 1389
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

可输入文本的下拉框

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

可输入文本的下拉框

评论

发表评论

相关推荐

密码输入延迟屏蔽

日历控件

渐变打分条

滚动新闻

网页配色

圆角文本框的实现

javascript加载xml，在chrome下失败的解决办法

二级树形菜单

不规则菜单

二级树形菜单

随机显示图片

滚动字幕效果

美化select

无图片圆角

设置滚动条的颜色

CSS细线表格

分页效果

FormTools

表单当前行高亮的实现

使用jQuery实现复选框全选和取消全选

最近访客更多访客>>