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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
jquery插件validate验证的小例子
May 08 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php实现留言板功能
2017/03/05 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python检测网络延迟的代码
2018/05/15 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
基于python实现百度翻译功能
2019/05/09 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
如何在Django项目中引入静态文件
2019/07/26 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
银行先进个人总结
2015/02/15 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书