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小数计算出现近似值的解决办法
Feb 06 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 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
MySQL相关说明
2007/01/15 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
JS之小练习代码
2008/10/12 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python中return self的用法详解
2018/07/27 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
学校督导评估方案
2014/06/10 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
初中英语教学随笔
2015/08/15 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
python实现自动化群控的步骤
2021/04/11 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL