javascriptアナログselectドロップメニュー

35744 ワード

JavaScript

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属性値を設定したいです.このように背景色などの属性を設定できます.マウスが離れると、このクラスNameの属性値を空に設定し、デフォルトの状態に戻ります.マウスがドロップダウン枠の他の場所をクリックした時、イベントをクリックしても、documentに泡ができます.このようにして、イベント処理関数を呼び出して、ドロップダウンメニューを隠します.
二.コードコメント:
1.var off link=document.getElemenntById('sel')は、id属性値がselのオブジェクトを取得する.
2.var aDt=olink.getElements ByTagName('dt')は、offlinkオブジェクトの下のdt元素オブジェクトのセットを取得する.
3.var aUl=olink.getElements ByTagName('ul')は、offlinkオブジェクトの下のul要素オブジェクトセットを取得する.
4.var aH 3=olink.getElements ByTagName('h 3')は、offlinkオブジェクトの下のh 3要素オブジェクトのセットを取得する.
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要素を隠しに設定して、2つのメニューが同時にドロップすることが不可能な状況を実現しました.
11 aUl[this.index].style.display='block'は、現在クリックしているプルダウンメニューを表示します.
12.document.onclick=function(){}は、documentバインディングイベントハンドラ関数であり、トップがdt以外のすべての要素を除いた場合は、二級メニューを隠します.
13.ev.cancerBubble=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.getElements ByTagName(li')は、ulオブジェクトの下にあるli要素オブジェクトのセットを取得する.
18.for(var i=0;i＜iLi.length;i＋＋)は、ulオブジェクト下の全てのli要素を実行するのに便利である.
19.1 iLi.onmouseover=function()は、li元素のためにオンモスoverイベントハンドリング関数を登録し、li要素のために新しいクラス属性を追加します.
20.iLi.onmouseout=function()は、li要素のためにonmouseoutイベントハンドリング関数を登録し、追加されたclass属性を削除します.
21.iLi.onclick=function(ev)｛｝、li要素はイベント処理関数を登録して、li要素の中の設定をh 3要素の中の内容にすることができます.
原文の住所は:http://www.51texiao.cn/javascriptjiaocheng/2015/0507/888.html
最初の住所は:http://www.softwhy.com/forum.php?mod=viewthread&tid=8103

良いJavaScriptはブラウザのパス方法を解析します.