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 相关文章推荐
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 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编写大型网站问题集
2007/03/06 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
3种php生成唯一id的方法
2015/11/23 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
express express-session的使用小结
2018/12/12 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python常用数据重复项处理方法
2019/11/22 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
小学生演讲稿
2014/01/12 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
霸气队列口号
2014/06/18 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL