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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
一实用的实现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 zip文件解压类代码
2009/12/02 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php的curl封装类用法实例
2014/11/07 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
jquery中获取select选中值的代码
2011/06/27 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
深究AngularJS之ui-router详解
2017/06/13 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
在python里从协程返回一个值的示例
2019/02/19 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
高中自我鉴定范文
2013/11/03 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
物业保安岗位职责
2014/07/02 职场文书
百日安全生产活动总结
2014/07/05 职场文书
求职信的正确写法
2014/07/10 职场文书
信息技术研修心得体会
2016/01/08 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
python游戏开发Pygame框架
2022/04/22 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers