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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
Bootstrap精简教程
Nov 27 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
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将向Java靠拢
2006/10/09 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
应届生自我鉴定
2013/12/11 职场文书
中英文自我评价语句
2013/12/20 职场文书
高二美术教学反思
2014/01/14 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
升旗仪式主持词
2014/03/19 职场文书
《海底世界》教学反思
2014/04/16 职场文书
车辆工程专业求职信
2014/04/28 职场文书
重阳节标语大全
2014/10/07 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
英语感谢信范文
2015/01/20 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
开学典礼校长致辞
2015/07/29 职场文书
幼儿园安全管理制度
2015/08/05 职场文书