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 关键字屏蔽实现函数
Aug 02 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
react ant Design手动设置表单的值操作
Oct 31 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微信支付通知的处理方式
2014/05/25 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
详解python时间模块中的datetime模块
2016/01/13 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2015年教务工作总结
2015/05/23 职场文书
初中语文教学研修日志
2015/11/13 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Redis实现短信验证码登录的示例代码
2022/06/14 Redis