js類后臺管理菜單類-MenuSwitch

2024-09-06 12:41:29

字體：大中小

來源：轉載

供稿：網友

寫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定義對象簡單學習例子

下一篇：從阿里媽媽發現的幾個不錯的表單驗證函數