<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>下拉菜單</title>
<style?type="text/css">
body,ul,li{?margin:0;?padding:0;?font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px;?margin:80px?auto;?position:relative;?z-index:10000;}
#divselect?cite{width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal;
padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;?
background:url(xjt.png)?no-repeat?right?center;}
#divselect?ul{width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;}
#divselect?ul?li{height:24px;?line-height:24px;}
#divselect?ul?li?a{display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;}
</style>
???<script?type="text/javascript">
/**
???????*??下拉菜單
???????*??@param?{string}?id?節(jié)點(diǎn)ID
???????*/
??????function?Selecter?(id)?{
??????????var?parent?=?document.getElementById(id),
??????????????nodes?=?parent.children;
??????????this.parent?=?parent;
??????????this.title?=?nodes[0];
??????????this.menu?=?nodes[1];
??????????this.init();
??????}
??????/**
???????*?初始化
???????*/
??????Selecter.prototype.init?=?function(){
????????var?doc?=?document;
????????this.selected?=?null;
????????this.maxLen?=?this.menu.children.length;
????????doc.addEventListener('click',this,false);
????????doc.addEventListener('keydown',this,false);
????????this.menu.addEventListener('mouseover',this,false);
????????this.menu.addEventListener('mouseout',this,false);
??????}
??????/**
???????*?事件處理
???????*/
??????Selecter.prototype.handleEvent?=?function(event){
????????var?target?=?event.target?||?event.srcElement;
????????switch(target.nodeName){
??????????//點(diǎn)擊三角時(shí)
??????????case?'CITE':
????????????this.menuShow();
????????????break;
???????????//?滑過(guò)滑過(guò)、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
??????????case?'A':
????????????this.removeLight();
????????????this.selected?=?target;
????????????this.menuUpdate();
????????????this.hightLight();
????????????if(event.type=='click'){
??????????????this.menuHide();
????????????}
????????????break;
????????????//?點(diǎn)擊頁(yè)面空白處時(shí)
??????????case?'HTML':
????????????this.menuHide();
????????????break;
??????????//鍵盤操作
??????????default:
????????????this.keydown(event.keyCode);
????????????break;
????????}
????????return
??????}
??????/**
???????*??更新菜單值
???????*/
??????Selecter.prototype.menuUpdate?=?function(){
????????this.title.innerHTML?=?this.selected.innerHTML;
??????}
??????/**
???????*?高亮選中項(xiàng)
???????*/
??????Selecter.prototype.hightLight?=?function(){
????????if(this.selected){
??????????this.selected.style.backgroundColor?=?'gray';
????????}
??????}
??????/**
???????*?移除高亮
???????*/
??????Selecter.prototype.removeLight?=?function(){
????????if(this.selected){
??????????this.selected.style.backgroundColor?=?'white';
????????}
??????}
??????/**
???????*?顯示菜單項(xiàng)
???????*/??????
??????Selecter.prototype.menuShow?=?function(){
????????this.menu.style.display?=?'block';
????????this.hightLight();
??????}
??????/**
???????*?隱藏菜單項(xiàng)
???????*/
??????Selecter.prototype.menuHide?=?function(){
????????this.menu.style.display?=?'none';
??????}
??????/**
???????*?取下一項(xiàng)
???????*/
??????Selecter.prototype.next=?function(){
????????var?target?=?this.selected;
????????var?index?=?target???target.getAttribute('selectid')-1?:?-1;
????????this.removeLight();
????????index?=?++index?%?this.maxLen;
????????this.selected?=?this.menu.children[index].children[0];
????????this.hightLight();???
??????}
??????/**
???????*?取上一項(xiàng)
???????*/
??????Selecter.prototype.prev?=?function(){
????????var?target?=?this.selected;
????????var?index?=?target???target.getAttribute('selectid')-1?:?1;
????????this.removeLight();
????????index?=?--index?<?0???0?:?index;
????????this.selected?=?this.menu.children[index].children[0];
????????this.hightLight();
??????}
??????/**
???????*??鍵盤操作
???????*?@param?{number}?code?ASSIC碼
???????*/
??????Selecter.prototype.keydown?=?function(code){
????????switch(code){
??????????case?40:?//down
????????????this.next();
????????????break;
??????????case?38://up
????????????this.prev();
????????????break;
??????????case?13:
????????????this.menuUpdate();
????????????this.menuHide();
????????????break;
??????????default:
????????????break;
????????}
??????}
??window.onload=function(){
????var?menu?=?new?Selecter('divselect');
??}
???</script>
</head>
<body>
<div?id="divselect">
??????<cite>請(qǐng)選擇分類</cite>
??????<ul>
?????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開發(fā)</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
??????</ul>
????</div>
</body>
</html>
278500368
2014-10-18
0 回答
舉報(bào)
0/150
提交
取消
