你的位置:首页 > Java教程

[Java教程]javascript模拟select下拉菜单


javascript模拟select下拉菜单:

由于自带的select下拉菜单确实是不够美观,并且美化的潜力也不够大,所以对外观要求比较高的网站,基本都要使用自定义的select下拉菜单,下面就提供了一个简单的例子供大家参考,代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title></head><style>*{ margin:0; padding:0;}li{ list-style:none;}body{ font:12px "宋体"; color:#666;}.select_down{ margin:100px auto; position:relative; width:600px; min-height:200px; height:auto!important; height:200px; border:1px solid #ccc; padding:20px; border-radius:8px}.select_down dt{ float:left; width:134px; position:relative; margin-right:5px; display:inline;}.select_down h3{ color:#919191; font-size:12px; font-weight:normal; border:1px solid #e5e5e5; height:18px; background:#fbfbfb; line-height:18px; text-indent:8px;}.select_down ul{ width:132px; border:1px solid #e5e5e5; background:#fbfbfb; position:absolute; top:18px; left:0; z-index:1; text-indent:8px; display:none;}.select_down ul li{ height:22px; line-height:22px; cursor:pointer;}.select_down ul li.hover{ background:#f2f2f2;}.select_down dt a{ position:absolute; width:18px; height:18px; top:1px; right:1px;}</style><script type="text/javascript">window.onload=function(){ var oflink = document.getElementById('sel'); var aDt = oflink.getElementsByTagName('dt'); var aUl = oflink.getElementsByTagName('ul'); var aH3= oflink.getElementsByTagName('h3');   for(var i=0;i<aDt.length;i++){  aDt[i].index = i;  aDt[i].onclick = function(ev){   var ev = ev || window.event;   for(var i=0;i<aUl.length;i++){    aUl[i].style.display = 'none';   }         aUl[this.index].style.display = 'block';   document.onclick = function(){    aUl[This.index].style.display = 'none';   };   ev.cancelBubble = true;  }; } for(var i=0;i<aUl.length;i++){  aUl[i].index = i;  (function(ul){   var iLi = ul.getElementsByTagName('li');   for(var i=0;i<iLi.length;i++){    iLi[i].onmouseover = function(){     this.className = 'hover';    };    iLi[i].onmouseout = function(){     this.className = '';    };    iLi[i].onclick = function(ev){     var ev = ev || window.event;     aH3[this.parentNode.index].innerHTML = this.innerHTML;     ev.cancelBubble = true;     this.parentNode.style.display = 'none';    };   }  })(aUl[i]); }}</script><body><div class="select_down" id="sel"> <dl>  <dt>   <h3>select选择</h3>   <ul>    <li>蚂蚁部落一</li>    <li>蚂蚁部落二</li>    <li>蚂蚁部落三</li>   </ul>  </dt> </dl> <dl>  <dt>   <h3>select选择</h3>   <ul>    <li>蚂蚁部落一</li>    <li>蚂蚁部落二</li>    <li>蚂蚁部落三</li>   </ul>  </dt> </dl></div></body></html>

以上代码实现了我们预期的效果,完全模拟实现了select下拉菜单的效果,下面简单介绍一下实现过程:

一.实现原理:原理非常的非常的简单,在默认状态下,下拉菜单时隐藏的,当点击的时候,可以将下拉菜单设置为显示状态,当鼠标放在下拉菜单的时候,会为相应的想设置className属性值,这样可以设置背景颜色等属性,当鼠标移开的时候,就会将此className属性值设置为空,也就恢复了默认状态。当鼠标点击下拉框的其他地方时,点击事件都能够冒泡到document,这样就就调用事件处理函数将下拉菜单隐藏。

二.代码注释:

1.var oflink = document.getElementById('sel'),获取id属性值为sel的对象。

2.var aDt = oflink.getElementsByTagName('dt'),获取oflink对象下dt元素对象集合。

3.var aUl = oflink.getElementsByTagName('ul'),获取oflink对象下的ul元素对象集合。

4.var aH3= oflink.getElementsByTagName('h3'),获取oflink对象下的h3元素对象集合。

5.for(var i=0;i<aDt.length;i++){},使用for遍历dt元素集合。

6.aDt.index = i,为索引值为dt元素创建index属性并复制为i。

7.aDt.onclick = function(ev){},为索引值为i的dt元素注册onclick事件处理函数。

8.var ev = ev || window.event,兼容各个浏览器的事件对象写法。

9.for(var i=0;i<aUl.length;i++),遍历所有的ul元素。

10.aUl.style.display = 'none',将所有的ul元素设置为隐藏,这样就实现了不可能出现两个菜单同时下拉的情况。

11.aUl[this.index].style.display = 'block',将当前点击的下拉菜单显示。

12.document.onclick = function(){},为document绑定事件处理函数,当顶级除去dt之外的所有元素都会将二级菜单隐藏。

13.ev.cancelBubble = true,组织事件冒泡,防止触发绑定在document上的onclik事件处理函数。

14.for(var i=0;i<aUl.length;i++),便利所有的ul元素。

15.aUl.index = i,为第iul元素创建一个index属性并赋值为i。

16.(function(ul){}(),创建并执行一个函数。

17.var iLi = ul.getElementsByTagName('li'),获取ul对象下的所以li元素对象集合。

18.for(var i=0;i<iLi.length;i++),便利执行ul对象下的所有li元素。

19.iLi.onmouseover = function(){},为li元素注册onmouseover事件处理函数,为li元素添加一个新的class属性。

20.iLi.onmouseout = function(){},为li元素注册onmouseout事件处理函数,移除添加的class属性。

21.iLi.onclick = function(ev){},li元素注册事件处理函数,可以将当li元素中的设置为h3元素中的内容。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0507/888.html

最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8103