好看的下拉菜单

转载 2007年09月27日 15:53:00

效果如下图:

 

代码:

<HTML><HEAD><TITLE>Class_Combo</TITLE>
<META content="MSHTML 6.00.2800.1589" name=GENERATOR>
<META content="" name=Author>
<META content="" name=Keywords>
<META content="" name=Description>
<SCRIPT language=JavaScript>
<!--
<!--
/** 
**    ================================================================================================== 
**    ClassName  :CLASS_COMBO 
**    Intro      :a control to replace select control in IE
**    Example    : 
      Ver        : 0.1
    --------------------------------------------------------------------------------------------------- 
 
     <div id="demo"></div>
     <SCRIPT LANGUAGE="JavaScript">
     <!--
        var de = new CLASS_COMBO('demo',100);
   de.add(new Option("<font color='red'>Red Word</font>","a"));
     //-->
    < /SCRIPT>
 
    --------------------------------------------------------------------------------------------------- 
**    Author    :ttyp 
**    Email     :ttyp@21cn.com 
**    Date      :2007-1-23
**    ================================================================================================== 
**/
 function CLASS_COMBO(id,width){ 
  this.opended = false;
  this.selectedIndex = -1;
  this.options = new Array();
  this.value  = "";
  this.text  = "";
  this.id   = id;
  var me = this;
  var ct = null; /* table */
  var hv = null; /* hidden input */
  var pl = null; /* show planel */
  var pt = null;
  var o = document.getElementById(id);
  if(o){
   var tb = document.createElement("table");
    o.appendChild(tb);
    this.handle = tb;
  
   var tr = tb.insertRow();
   var tc = tr.insertCell();
   var th = tr.insertCell();   
    tc.style.width = (width - 14) + 'px';
    tc.style.whiteSpace = "nowrap";
    ct = tc;
    th.style.fontFamily="webdings";
    th.style.fontSize = "6pt";
    th.style.width = "14px";
    th.style.backgroundColor = "#f8f8f8";
    th.align = "center";
    th.innerText = "6";
    th.onmouseover= function(){this.style.cursor='default';}
    th.onselectstart = function(){return false;}
    tb.style.borderCollapse ="collapse";
    tb.style.fontSize ="9pt";
    tb.style.tableLayout = "fixed";
    tb.border = 1;
    tb.borderColor = "#f0f0f0";
    tb.cellSpacing = 0;
    tb.cellPadding = 1;
    tb.setAttribute("accoc",id + "__combo_contain");
    tb.onclick = function(){tb.focus();me.show();}
    tb.onmouseover = function(){
     this.borderColor = "#316ac5"; /*IE*/
     this.style.border = "#316ac5 1px solid"; /* Safari, Opera and Mozilla */
    }
    tb.onmouseout = function(){
     this.borderColor = "#f0f0f0"; /*IE*/
     this.style.border = "#f0f0f0 1px solid"; /* Safari, Opera and Mozilla */   
    }
    tb.onblur=function(){
     var active = document.activeElement;
     var stopHide = false;
     if(active!=null){     
      if(active.tagName =="TD"){
       while(active!=null&&active.tagName!="TABLE"){
        active = active.parentNode;
       }
      }
      var ac = active.getAttribute("accoc");
      if(ac!=null&&typeof(ac)!="undefined"&&ac==id + "__combo_contain"){   
       stopHide = true;
      }
     }
     if(stopHide==false){
      me.hide();
     }
    }

    pl = document.createElement("div");
    o.appendChild(pl);
    pt = document.createElement("table");
    pl.appendChild(pt);
    var w,l,t,h;
   
    var r = getAbsolutePos(me.handle);
    w = r.w;
    l = r.x;
    t = r.y+r.h;
                pl.style.position = "absolute";
                pl.style.top = t;
                pl.style.left = l;
                pl.style.width = w;
                pl.style.overflowY  = "auto";
                pl.style.overflowX = "hidden";     
                pl.style.backgroundColor = "#ffffff";
                pl.style.border  = "1px solid #f0f0f0";
    pl.style.display = "none";
    pl.style.padding = "0";
                pl.setAttribute("accoc",id + "__combo_contain"); /* for scrolling */
                pl.onblur = me.handle.onblur;
                pl.onselectstart  = function(){return false;}
                pl.onfocus = function(){ me.handle.focus();}
    pt.style.borderCollapse ="collapse";
    pt.style.fontSize ="9pt";
    pt.style.width = "100%";
    pt.border = 0;
    pt.cellSpacing = 0;
    pt.cellPadding = 1;
    hv = document.createElement("input");   /* Create hidden input for submit */
    hv.type = "hidden";
    hv.name = id + "__combo_hiden_value";   
    hv.id = id + "__combo_hiden_value";
    o.appendChild(hv);
   
  }
  this.add = function(op){
   var tr = pt.insertRow();
   var tc = tr.insertCell();
   var dv = document.createElement("div");
    tc.appendChild(dv);
    dv.style.width = "100%";
    dv.style.border = "1px solid #f0f0f0";
    dv.style.padding = "1 1 1 1";
    dv.style.cursor = "hand";
    dv.style.wordBreak = "break-all";
    dv.style.wordWrap = "break-word";
    dv.innerHTML  = op.text;
    dv.onmouseout = function(){this.style.border = "1px solid #f0f0f0";}
    dv.onmouseover= function(){this.style.border = "1px solid #316ac5";}
    dv.onmousedown = function(){var nn = this;while(nn!=null&&nn.tagName!="TR"){nn = nn.parentNode;}me.setIndex(nn.rowIndex);}  /*when you use onclick event,the event while be ignored*/
   if(this.selectedIndex<0){ /*set the first option for default*/
    this.setIndex(0);
   }
   this.options[this.options.length] = op;
   /*
    * adjust panel height
    */
   if(this.options.length>10)
   {
    pl.style.height = "200px";
   }
  }
  /* OnClick Event */
  this.onclick = function(){
  }
  /* OnChange Event */
  this.onchange = function(){
  }
  this.setIndex = function(index){
   if(index>=0&&index<this.options.length){   
    var op = this.options[index];
    this.selectedIndex = index;
    this.value = hv.value;
    this.text = op.text;
    ct.innerHTML= toText(op.text);
    hv.value = op.value; /*for submit*/
    this.onchange(); /* fire event */
   }else{
    this.selectedIndex = -1;
    this.value = "";
    this.text = "";
    hv.value = "";
    ct.innerText= "";
    this.onchange(); /* fire event */
   }
  }
 
  function getAbsolutePos(el){
   var r = { x: el.offsetLeft, y: el.offsetTop,w:el.offsetWidth,h:el.offsetHeight};
   if (el.offsetParent){
    var tmp = getAbsolutePos(el.offsetParent);
     r.x += tmp.x;
     r.y += tmp.y;
   }
   return r;
  }; 
 
  function toText(txt){ /*inner function*/
   var o = document.createElement("div");
    o.innerHTML = txt;
   var s = o.innerText;
   delete o;
   o = null;
   return s;
  }
  this.getText = function(i){
   var item = -1;
   if(i==null&&typeof(i)=="undefined"){
    item = this.selectedIndex;
   }else{
    item = i;
   }
   if(this.options.length>0&&item>=0&&item<this.options.length){
    return toText(this.options[item].text);
   }else{
    return undefined;
   }
  }
  this.show=function(){
   this.opened = !this.opened;
   if(this.opened&&this.options.length>0){
    pl.style.display = "";
   }else{
    pl.style.display = "none";
   }
  }
  this.hide=function(){
   this.opened = false;
   pl.style.display = "none";
  }
  this.clear = function(){ 
   this.hide();
   this.setIndex(-1);
   this.options.length = 0;
   for(var i=pt.rows.length-1;i>=0;i--){   
    pt.deleteRow();
   }
  }
  this.removeAt = function(index){
   if(index>=0&&index<this.options.length){
    this.hide();
    this.options.splice(index,1);
    pt.deleteRow(index);
   
    if(index<=this.selectedIndex){
     if(this.options.length>0){
      if(index<this.options.length){
       this.setIndex(index);
      }else{
       this.setIndex(this.options.length-1);    
      }
     }else{
      this.setIndex(-1);
     }
    }
    if(this.options.length<10){
     pl.style.height = "";
    }
   }
  }
 }
//-->
</SCRIPT>
</HEAD>
<BODY><STRONG>Style:</STRONG>
<DIV id=demo></DIV>DSGDFGSDFG
<P></P><BR><STRONG>Font:</STRONG>
<DIV id=demo1></DIV>
<SCRIPT language=JavaScript>
 <!--
 var de = new CLASS_COMBO('demo',228);
  de.add(new Option("<font color='red'>Red Word</font>","a"));
  de.add(new Option("<strong>Strong Word</strong>","b"));
  de.add(new Option("<font size=6>Big Word</font>","c"));
  de.add(new Option("<u>Underline</u>","d"));
  de.add(new Option("<STRIKE>Strike Word</STRIKE>","e"));
  de.add(new Option("<cite>Cite Word</cite>","f"));
  de.add(new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","g"));
  de.add(new Option("<marquee>hello</marquee>","h"));

  de.add(new Option("long word test","i"));
  de.add(new Option("<strong>Strong Word</strong>","b"));
  de.add(new Option("<font size=6>Big Word</font>","c"));
  de.add(new Option("<u>Underline</u>","d"));
  de.add(new Option("<STRIKE>Strike Word</STRIKE>","b"));
  de.add(new Option("<cite>Cite Word</cite>","c"));
  de.add(new Option("<span style='background-color: black;color:white;width:100%'>Black Background</span>","c"));
  /*
   * Set Index Demo
   */ 
  de.setIndex(1);
  /*
   * OnChange Event Demo
   */
  de.onchange = function(){
   document.title =(de.getText());
  }

 var df = new CLASS_COMBO('demo1',128);
  df.add(new Option("<font face='Arial'>Arial</font>","h"));
  df.add(new Option("<font face='Arial Black'>Arial Blak</font>","i"));
  df.add(new Option("<font face='Comic Sans MS'>Comic Sans MS</font>","j"));
  df.add(new Option("<font face='Courier New'>Courier New</font>","k"));
  df.add(new Option("<font face='Monotype Corsiva'>Monotype Corsiva</font>","l"));
  df.add(new Option("<font face='MS Sans Serif'>MS Sans Serif</font>","p"));
  df.add(new Option("<font face='Verdana'>Verdana</font>","q"));
 //-->
 </SCRIPT>

<P></P><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><INPUT onclick=de.setIndex(3) type=button value=setIndex> <INPUT onclick=de.removeAt(0) type=button value=remove> <INPUT onclick=de.clear() type=button value=clear> <INPUT onclick=alert(de.text) type=button value=text> <INPUT onclick=alert(de.getText()) type=button value=getText> <INPUT onclick=alert(de.value) type=button value=value> </BODY></HTML>

相关文章推荐

好看的下拉菜单

  • 2013年12月16日 21:05
  • 563KB
  • 下载

CSS3 animation--仿写炫酷的下拉菜单

1.原文地址:15款手机端打开菜单动画过渡特效DEMO15 2.下面我们就仿着他的源码自己尝试写一下。不得不说由于是在移动端,这样的效果 确实是狂酷耍帅吊炸天的漂亮!...

仿select下拉菜单

  • 2016年12月23日 13:27
  • 2KB
  • 下载

css3 3d旋转下拉菜单

  • 2017年01月10日 13:24
  • 1018B
  • 下载

中国地区三级联动下拉菜单的实现

在网上看见的,就弄下来了: function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this.It...

jQuery多级下拉菜单

  • 2014年12月09日 16:32
  • 4KB
  • 下载

下拉菜单视图

  • 2017年09月29日 17:45
  • 89KB
  • 下载

从下拉菜单设计细节看Amazon对用户体验的把握

Amazon网站分类导航的下拉菜单被使用得非常频繁,但你有没有注意过它的反应非常迅速?     当然,这在技术上并非难题,但是大多数网站下拉菜单显示子菜单有一定的延迟,这比如老版...
  • DSeven
  • DSeven
  • 2013年05月18日 16:23
  • 1703

下拉菜单的UI设计效果

  • 2015年04月24日 17:43
  • 142KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:好看的下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)