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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js中switch case循环实例代码
Dec 30 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
node.js博客项目开发手记
Mar 16 Javascript
详解VUE前端按钮权限控制
Apr 26 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
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
正规的求职信范文分享
2013/12/11 职场文书
租房协议书怎么写
2014/04/10 职场文书
医德医风演讲稿
2014/05/20 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
病房管理制度范本
2015/08/06 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
基于Python实现射击小游戏的制作
2022/04/06 Python