这里使用原生的javascript，用面向对象的方式创建一个容易维护使用方便的滑动菜单

<!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">
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)
}
}
}
}
//}
</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>

使用javascript oop开发滑动（slide) 菜单控件的更多相关文章

  1. 实用的树形菜单控件tree

     jQuery plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree  jsTree ...

  2. html树形菜单控件

    html树形菜单控件  链接 http://www.ithao123.cn/content-713974.html         jQuery plugin: Treeview  这个插件能够把无序 ...

  3. 【转】html树形菜单控件

    Query plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. 主页:http://bassistance.de/jQuery-plugins/jquery-pl ...

  4. Windows Store App JavaScript 开发：WinJS库控件

    在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...

  5. Asp.net 菜单控件

    本文介绍的菜单控件采用的css 和ul list来显示菜单,生成的html小,无需javascript支持,对大部分的浏览器都支持,除ie6要单独修改css也可以使其支持. 通过本文可以了解asp.n ...

  6. Android开发中目前流行控件和知识点总结

    Android开发中目前流行控件和知识点总结   1.SlidingMenu 滑动菜单 应用案例:Facebook . Path 2.0 .人人.网易新闻 下载地址: https://github.c ...

  7. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  8. SNF快速开发平台MVC-富文本控件集成了百度开源项目editor

    一.效果如下: 二.在框架当中调用代码如下: 1.在js里配置如下: <script type="text/javascript"> var viewModel =fu ...

  9. 简洁的Asp.net菜单控件

    http://www.cnblogs.com/ruinet/archive/2009/11/10/1599984.html asp.net自带的菜单控件采用的table和javascript,导致生成 ...

随机推荐

  1. Yeslab现任明教教主数据中心Nexus课程 视频教程 下载

    Yeslab现任明教教主数据中心Nexus课程 视频下载 视频教程下载目录: Yeslab现任明教教主数据中心Nexus课程第1部分.rar Yeslab现任明教教主数据中心Nexus课程第2部分.p ...

  2. ZendStudio快捷键 注释的快捷键

    注:本文省略“通用快捷键”描述,诸如:ctrl+N=新建,ctrl+O=打开,ctrl+C=复制,ctrl+V,ctrl+X……等等几乎所有软件都通用的一组快捷键,而着重介绍zde独有的快捷键,了解并 ...

  3. live555从RTSP服务器读取数据到使用接收到的数据流程分析

    本文在linux环境下编译live555工程,并用cgdb调试工具对live555工程中的testProgs目录下的openRTSP的执行过程进行了跟踪分析,直到将从socket端读取视频数据并保存为 ...

  4. WebApi 文件上传

    1. 注意给form表单加上enctype = "multipart/form-data" 属性,否则会导致Action的参数HttpPostedFileBase 对象接收不到文件 ...

  5. <runtime> 的 <assemblyBinding> 元素

    一.<assemblyBinding> 元素 包含有关程序集版本重定向和程序集位置的信息. <assemblyBinding xmlns="urn:schemas-micr ...

  6. iOS学习笔记-死锁deadlock理解

    1.首先看一下官方文档的解释,这个block的队列是同步执行的,不像异步,这个方法直到block执行完毕才会返回 2.主线程一旦开启,就要先把自己的代码执行完成之后,才去执行加入到主队列中的任务 De ...

  7. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  8. 转载 Eclipse下的SSH开发例子

    前言 确实好久没有写过了,一直以来把写博文当作自己学习的总结,当作做过的笔记,随时都可以拿出来看看.不过最近习惯了用OneNote和印象笔记,所以就很少在论坛写博文.但是偶尔看到几篇被转载了,也小小的 ...

  9. python 和 c# 连接数据库 (Access)

    模块pypyodbc 1.3.3下载:   https://pypi.python.org/pypi/pypyodbc/ 安装:解压文件找到pypyodbc.py复制到python安装目录Lib文件夹 ...

  10. AdapterView及其子类之四：基于ListView及SimpleAdapter实现列表

    代码请见SimpleAdapterDemo.zip. 步骤如下: 1.创建主布局文件 <RelativeLayout xmlns:android="http://schemas.and ...