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实现匀速运动的代码实例
Nov 29 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JS扩展方法实例分析
Apr 15 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
移动端界面的适配
Jan 11 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 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
投票管理程序
2006/10/09 PHP
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
浅析PHP Socket技术
2013/08/02 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
几行js代码实现自适应
2017/02/24 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
代码中finally中的代码会不会执行
2012/02/06 面试题
安全施工标语
2014/06/07 职场文书
保护动物的标语
2014/06/11 职场文书
公司感谢信范文
2015/01/22 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript
Python安装使用Scrapy框架
2022/04/12 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android