javascript oop开发滑动(slide)菜单控件
人气:0
这里使用原生的javascript，用面向对象的方式创建一个容易维护使用方便的滑动菜单，调用方式如下：
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两个文件
slide.htm:
<!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">第一个一级菜单<https://img.qb5200.com/download-x/dt>
<dd style="display:block;">
<ul>
<li><a href="#">第一个二级菜单</a></li>
<li>第一个二级菜单</li>
<li>第一个二级菜单</li>
</ul>
<https://img.qb5200.com/download-x/dd>
<https://img.qb5200.com/download-x/dl>
<dl>
<dt>第二个一级菜单<https://img.qb5200.com/download-x/dt>
<dd>
<ul>
<li>第二个二级菜单</li>
<li>第二个二级菜单</li>
<li>第二个二级菜单</li>
</ul>
<https://img.qb5200.com/download-x/dd>
<https://img.qb5200.com/download-x/dl>
<dl>
<dt>第三个一级菜单<https://img.qb5200.com/download-x/dt>
<dd>
<ul>
<li>第三个二级菜单</li>
<li>第三个二级菜单</li>
<li>第三个二级菜单</li>
</ul>
<https://img.qb5200.com/download-x/dd>
<https://img.qb5200.com/download-x/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:
function Slider(i, panelHeight) { /https://img.qb5200.com/download-x/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);
}
}
},
//事件处理函数
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);
},
//动画算法
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)
}
}
}
}
//}
上面就所有代码了这里因为是演示所以让HTML CSS尽量的简化，另外使用jquery的 fn.slideUp fn.slideDown 实现起来会更容易不过我作为一个专业的开发者多了解些原生的JS对技术的提高还是很有帮助。
复制代码 代码如下:
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两个文件
slide.htm:
复制代码 代码如下:
<!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">第一个一级菜单<https://img.qb5200.com/download-x/dt>
<dd style="display:block;">
<ul>
<li><a href="#">第一个二级菜单</a></li>
<li>第一个二级菜单</li>
<li>第一个二级菜单</li>
</ul>
<https://img.qb5200.com/download-x/dd>
<https://img.qb5200.com/download-x/dl>
<dl>
<dt>第二个一级菜单<https://img.qb5200.com/download-x/dt>
<dd>
<ul>
<li>第二个二级菜单</li>
<li>第二个二级菜单</li>
<li>第二个二级菜单</li>
</ul>
<https://img.qb5200.com/download-x/dd>
<https://img.qb5200.com/download-x/dl>
<dl>
<dt>第三个一级菜单<https://img.qb5200.com/download-x/dt>
<dd>
<ul>
<li>第三个二级菜单</li>
<li>第三个二级菜单</li>
<li>第三个二级菜单</li>
</ul>
<https://img.qb5200.com/download-x/dd>
<https://img.qb5200.com/download-x/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:
复制代码 代码如下:
function Slider(i, panelHeight) { /https://img.qb5200.com/download-x/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);
}
}
},
//事件处理函数
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);
},
//动画算法
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)
}
}
}
}
//}
上面就所有代码了这里因为是演示所以让HTML CSS尽量的简化，另外使用jquery的 fn.slideUp fn.slideDown 实现起来会更容易不过我作为一个专业的开发者多了解些原生的JS对技术的提高还是很有帮助。
加载全部内容