js类后台管理菜单类-MenuSwitch

2020-02-29 15:17:49

字体：大中小

来源：转载

供稿：网友

写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";

上一篇：从阿里妈妈发现的几个不错的表单验证函数

下一篇：js定义对象简单学习例子