管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　这里使用原生的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对技术的提高还是很有帮助。

教程首页 更多教程