js类后台管理菜单类-MenuSwitch


Posted in Javascript onSeptember 12, 2007

写MenuSwitch类的出发点是因为随着后台管理项越来越多,从而导致菜单显示部出现了滚动条导致页面很不美观,自己蒙生写这个JS类了。

这个功能类采用了目前比较流行的Web2.0做法,使用DIV+CSS+JS方式,将样式和功能分开。我下面先把演示效果放出来吧


    function MenuSwitch(className){         
        this._elements = []; 
        this._default = -1; 
        this._className = className; 
        this._previous = false; 
    } 
    MenuSwitch.prototype.setDefault = function(id){ 
        this._default = Number(id); 
    } 
    MenuSwitch.prototype.setPrevious = function(flag){ 
        this._previous = Boolean(flag); 
    } 
    MenuSwitch.prototype.collectElementbyClass = function(){ 
        this._elements = []; 
        var allelements = document.getElementsByTagName("div"); 
        for(var i=0;i<allelements.length;i++){ 
            var mItem = allelements[i]; 
            if (typeof mItem.className == "string" && mItem.className == this._className){ 
                var h3s = mItem.getElementsByTagName("h3"); 
                var uls = mItem.getElementsByTagName("ul"); 
                if(h3s.length == 1 && uls.length == 1){ 
                    h3s[0].style.cursor = "hand";                     
                    if(this._default == this._elements.length){ 
                        uls[0].style.display = "block";     
                    }else{ 
                        uls[0].style.display = "none";     
                    } 
                    this._elements[this._elements.length] = mItem; 
                }                 
            } 
        } 
    } 
    MenuSwitch.prototype.open = function(mElement){ 
        var uls = mElement.getElementsByTagName("ul"); 
        uls[0].style.display = "block"; 
    } 
    MenuSwitch.prototype.close = function(mElement){ 
        var uls = mElement.getElementsByTagName("ul"); 
        uls[0].style.display = "none"; 
    } 
    MenuSwitch.prototype.isOpen = function(mElement){ 
        var uls = mElement.getElementsByTagName("ul");         
        return uls[0].style.display == "block"; 
    } 
    MenuSwitch.prototype.toggledisplay = function(header){ 
        var mItem; 
        if(window.addEventListener){ 
            mItem = header.parentNode; 
        }else{ 
            mItem = header.parentElement; 
        } 
        if(this.isOpen(mItem)){ 
            this.close(mItem); 
        }else{ 
            this.open(mItem); 
        }         
        if(!this._previous){ 
            for(var i=0;i<this._elements.length;i++){ 
                if(this._elements[i] != mItem){                 
                    var uls = this._elements[i].getElementsByTagName("ul"); 
                    uls[0].style.display = "none";         
                } 
            } 
        } 
    }     
    MenuSwitch.prototype.init = function(){         
        var instance = this; 
        this.collectElementbyClass(); 
        if(this._elements.length==0){ 
            return; 
        } 
        for(var i=0;i<this._elements.length;i++){ 
            var h3s = this._elements[i].getElementsByTagName("h3");             
            if(window.addEventListener){ 
                h3s[0].addEventListener("click",function(){instance.toggledisplay(this);},false); 
            }else{ 
                h3s[0].onclick = function(){instance.toggledisplay(this);} 
            } 
        } 
    }

 

Javascript 相关文章推荐
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
js实现转动骰子模型
Oct 24 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
一实用的实现table排序的Javascript类库
Sep 12 #Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 #Javascript
js类中获取外部函数名的方法与代码
Sep 12 #Javascript
javascript下过滤数组重复值的代码
Sep 10 #Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 #Javascript
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 #Javascript
IE不出现Flash激活框的小发现的js实现方法
Sep 07 #Javascript
You might like
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
Express.JS使用详解
2014/07/17 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
项目合作协议书
2014/04/16 职场文书
经济管理专业求职信
2014/06/09 职场文书
计划生育证明格式范本
2014/09/12 职场文书
个人查摆剖析材料
2014/10/04 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
先进班组材料范文
2014/12/25 职场文书
推销搭讪开场白
2015/05/28 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP