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代码
Sep 04 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
详解TypeScript的基础类型
Feb 18 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 编写的日历
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
使用K.function()调试keras操作
2020/06/17 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
志愿者活动总结范文
2014/04/26 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
交通处罚决定书
2015/06/24 职场文书
中秋联欢会主持词
2015/07/04 职场文书
中秋节随笔
2015/08/15 职场文书
学风建设主题班会
2015/08/17 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL