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写的操作系统
Apr 23 Javascript
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
js网页右下角提示框实例
Oct 14 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
vue接口请求加密实例
Aug 11 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
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
React中的render何时执行过程
2018/04/13 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Flask之请求钩子的实现
2018/12/23 Python
python超时重新请求解决方案
2019/10/21 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
财产公证书格式
2014/04/10 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
网络舆情信息简报
2015/07/21 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers