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 相关文章推荐
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
js实现双色球效果
Aug 02 Javascript
构建一个JavaScript插件系统
Oct 20 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
采购员工作总结范文
2015/08/12 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫