javascript oop开发滑动(slide)菜单控件


Posted in Javascript onAugust 25, 2010

这里使用原生的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">第一个一级菜单</dt> 
<dd style="display:block;"> 
<ul> 
<li><a href="#">第一个二级菜单</a></li> 
<li>第一个二级菜单</li> 
<li>第一个二级菜单</li> 
</ul> 
</dd> 
</dl> 
<dl> 
<dt>第二个一级菜单</dt> 
<dd> 
<ul> 
<li>第二个二级菜单</li> 
<li>第二个二级菜单</li> 
<li>第二个二级菜单</li> 
</ul> 
</dd> 
</dl> 
<dl> 
<dt>第三个一级菜单</dt> 
<dd> 
<ul> 
<li>第三个二级菜单</li> 
<li>第三个二级菜单</li> 
<li>第三个二级菜单</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:
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); 
} 
} 
}, 
//事件处理函数 
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对技术的提高还是很有帮助。
Javascript 相关文章推荐
Javascript 类型转换方法
Oct 24 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
JavaScript初学者需要了解10个小技巧
Aug 25 #Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 #Javascript
js中判断控件是否存在
Aug 25 #Javascript
JavaScript浏览器选项卡效果
Aug 25 #Javascript
Javascript之旅 对象的原型链之由来
Aug 25 #Javascript
Javascript new关键字的玄机 以及其它
Aug 25 #Javascript
jquery下组织javascript代码(js函数化)
Aug 25 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php语法检查的方法总结
2019/01/21 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python编写登陆接口的方法
2017/07/10 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
施工员岗位职责
2014/03/16 职场文书
青春无悔演讲稿
2014/05/08 职场文书
服务承诺口号
2014/05/22 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
水电施工员岗位职责
2015/04/11 职场文书