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 相关文章推荐
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
Jquery api 速查表分享
Jan 12 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Atom的python插件和常用插件说明
2018/07/08 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
PyTorch中的C++扩展实现
2020/04/02 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
python 实现IP子网计算
2021/02/18 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
办公室助理岗位职责
2013/12/25 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
小学语文教学反思
2014/02/10 职场文书
军训考核自我鉴定
2014/02/13 职场文书
人力资源主管职责范本
2014/03/05 职场文书
诚信考试承诺书
2014/03/27 职场文书
个人投资计划书
2014/05/01 职场文书
节能环保口号
2014/06/12 职场文书
校庆标语集锦
2014/06/25 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Nginx四层负载均衡的配置指南
2021/06/11 Servers
pandas求平均数和中位数的方法实例
2021/08/04 Python