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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python代码太长换行的实现
2019/07/05 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python ini文件常用操作方法解析
2020/04/26 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
往来会计岗位职责
2013/12/19 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书