快捷導(dǎo)航

javascript oop開(kāi)發(fā)滑動(dòng)(slide)菜單控件

更新時(shí)間：2010年08月25日 23:49:55 作者：

這里因?yàn)槭茄菔舅宰孒TML CSS盡量的簡(jiǎn)化，另外使用jquery的 fn.slideUp fn.slideDown 實(shí)現(xiàn)起來(lái)會(huì)更容易不過(guò)我作為一個(gè)專業(yè)的開(kāi)發(fā)者多了解些原生的JS對(duì)技術(shù)的提高還是很有幫助。

這里使用原生的javascript，用面向?qū)ο蟮姆绞絼?chuàng)建一個(gè)容易維護(hù)使用方便的滑動(dòng)菜單，調(diào)用方式如下：

復(fù)制代碼代碼如下:

 
var $sliding = document.getElementById("silding"); 
var s1 = new Sliding(); 
s1.commands = $sliding.getElementsByTagName("dt"); 
s1.panels = $sliding.getElementsByTagName("dd"); ; 
s1.init("mouseover", "active"); 

演示代碼分為slide.js和slide.html兩個(gè)文件
slide.htm:

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript slide控件演示</title> 
<style type="text/css"> 
/*reset*/ 
dl,ul,li,dt,dd{ margin:0; padding:0; list-style:none; } 
/*silding*/ 
.silding{ width:200px; border:1px solid #ccc; line-height:25px; overflow:hidden;} 
.silding dt{border-bottom:1px solid #ccc; background-color:#bebebe; cursor:pointer} 
.silding dd{ display:none; background:#efefef; overflow:hidden; font-size:12px; } 
.silding .active{ font-weight:bold;} 
</style> 
<script type="text/javascript" src="slide.js"></script> 
</head> 
<body> 
<div id="silding" class="silding"> 
<dl> 
<dt class="active">第一個(gè)一級(jí)菜單</dt> 
<dd style="display:block;"> 
<ul> 
<li><a href="#">第一個(gè)二級(jí)菜單</a></li> 
<li>第一個(gè)二級(jí)菜單</li> 
<li>第一個(gè)二級(jí)菜單</li> 
</ul> 
</dd> 
</dl> 
<dl> 
<dt>第二個(gè)一級(jí)菜單</dt> 
<dd> 
<ul> 
<li>第二個(gè)二級(jí)菜單</li> 
<li>第二個(gè)二級(jí)菜單</li> 
<li>第二個(gè)二級(jí)菜單</li> 
</ul> 
</dd> 
</dl> 
<dl> 
<dt>第三個(gè)一級(jí)菜單</dt> 
<dd> 
<ul> 
<li>第三個(gè)二級(jí)菜單</li> 
<li>第三個(gè)二級(jí)菜單</li> 
<li>第三個(gè)二級(jí)菜單</li> 
</ul> 
</dd> 
</dl> 
</div> 
<script type="text/javascript"> 
var $sliding = document.getElementById("silding"); 
var s1 = new Sliding(); 
s1.commands = $sliding.getElementsByTagName("dt"); 
s1.panels = $sliding.getElementsByTagName("dd"); ; 
s1.init("mouseover", "active"); 
</script> 
</body> 
</html> 

slide.js:

復(fù)制代碼代碼如下:

 
function Slider(i, panelHeight) { //dto 
this.index = i; 
this.panelHeight = panelHeight; 
} 
//class Sliding { 
function Sliding(activeIndex) { 
this.commands = []; 
this.panels = []; 
this.activeIndex = activeIndex || 0; 
this.sliderCache = {}; 
} 
Sliding.prototype = { 
//綁定事件 
init: function(eventName, activeCssClass) { 
var _this = this; 
var cmds = _this.commands; 
_this.activeClass = activeCssClass; 
for (var i = 0, n = cmds.length; i < n; i++) { 
cmds[i]["on" + eventName] = function(e) { 
_this.handel(this, e); 
} 
cmds[i].index = i; 
if (i == _this.activeIndex) { 
_this.sliderCache = new Slider(i, _this.panels[i].offsetHeight); 
} 
} 
}, 
//事件處理函數(shù) 
handel: function(elem, args) { 
var _this = this; 
var index = elem.index; 
var cacheIndex = _this.sliderCache.index; 
var cacheElem = _this.commands[cacheIndex]; 
if (index == cacheIndex) return; 
var showPanel = _this.panels[index]; 
var hidePanel = _this.panels[cacheIndex]; 
var h = parseInt(_this.sliderCache.panelHeight); 
showPanel.style.height = "0px"; 
showPanel.style.display = "block"; 
_this.tween(hidePanel, showPanel, h); 
elem.className = _this.activeClass; 
cacheElem.className = cacheElem.className.replace(eval("/ ?"+_this.activeClass+" ?/"),""); 
_this.sliderCache = new Slider(index, h); 
}, 
//動(dòng)畫(huà)算法 
tween: function(obj0, obj1, h) { 
_this = arguments.callee; 
var step = 20; 
if ("\v" == "v") { 
step = 30; 
} 
if (h > 0) { 
var h0 = obj0.offsetHeight; 
var h1 = obj1.offsetHeight; 
if (h < step) { 
obj0.style.display = "none"; 
obj0.style.height = (h1 + h) + "px"; 
obj1.style.height = (h1 + h) + "px"; 
} else { 
h = h - step; 
obj0.style.height = (h0 - step) + "px"; 
obj1.style.height = (h1 + step) + "px"; 
setTimeout(function() { 
_this(obj0, obj1, h) 
}, 
50) 
} 
} 
} 
} 
//} 

上面就所有代碼了這里因?yàn)槭茄菔舅宰孒TML CSS盡量的簡(jiǎn)化，另外使用jquery的 fn.slideUp fn.slideDown 實(shí)現(xiàn)起來(lái)會(huì)更容易不過(guò)我作為一個(gè)專業(yè)的開(kāi)發(fā)者多了解些原生的JS對(duì)技術(shù)的提高還是很有幫助。

您可能感興趣的文章: