js类后台管理菜单类-MenuSwitch

2019-06-02 11:15:26丽君
写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";