自写Jquery插件 Menu

时间：2022-11-28 14:30:44

载请注明出处，谢谢！https://www.cnblogs.com/GaoAnLee/p/9067543.html 

可以结合我自写的Jquery插件Tab 一起使用哦

上一个整体效果

自写Jquery插件 Menu

直接撸代码：

html：

<body>
    <div id='menu' class='west'></div>
</body>

css:

@CHARSET "UTF-8";

/******************* start west ***********************/

.sidebar-toggle {
    height: 30px;
    line-height: 30px;
    color: #aeb9c2;
    background-color: #4A5064;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.sidebar-toggle .fa {
    margin-top: 10px;
}

.main-menu {
    font-size: 13px;
}

.main-menu ul {
    background-color: #42485b;
    color: #ffffff;
    width: 225px;
}

.main-menu ul, .main-menu li {
    position: relative;
    list-style: none;
    border: 0;
    cursor: pointer;
}

.main-menu li>a {
    height: 20px;
    display: block;
    text-decoration: none;
    padding: 15px 15px;
}

.main-menu li>a>span {
    margin-left: 5px;
}

.main-menu a:hover{
    background-color: #00C1DE;
}

.two-level li a{
  padding: 15px 35px;
}

.three-level li a{
  padding: 15px 55px;
}

/*菜单第一级*/
.main-menu .two-level {
    /*关闭第二级*/
    display: none;
}

/*菜单第二级*/
.main-menu .open .two-level {
    display: block;
    /*打开第二级*/
}

.main-menu .open .two-level .three-level {
    /*关闭第三级*/
    display: none;
}

/*菜单第三级*/
.main-menu .three-level {
    /*关闭第三级*/
    display: none;
}

.main-menu .open .two-level .open .three-level {
    /*打开第三级*/
    display: block;
}


/*右侧小图标*/
.menu-arrow {
    position: absolute;
    top: 16.5px;
    right: 10px;
}

.menu-arrow:after, .main-menu .one-level .open .two-level .menu-arrow:after {
    content: "\f104";
}

.main-menu .one-level .open .menu-arrow:after, .main-menu .one-level .open .two-level .open .menu-arrow:after {
    content: "\f106";
}
/*隐藏url*/
.url {
    display: none;
}


/******************* end west ***********************/

 jquery.menu.js:

/**
 * menu
 * auther GaoAnLee
 * <div id='menu' class='west'>
 *     //js-data
 * </div>
 */
;
(function($, window, document, undefined) {
    //初始化
    function _init(menu, b) {
        var _this = menu.element;
        var options = $.data(_this, 'menu').options;
        if (b) {
            _this.html('<div class=\"sidebar-toggle\"><i class=\"fa fa-fw fa-dedent\"></i></div><div class=\"main-menu\"></div>');
        }
        openOrCloseMenu(options);
        selectTab();
    }
    //ajax加载数据 url
    function loadData(parm) {
        //loadMenu
        $.ajax({
            type: 'get',
            url: parm,
            dataType: 'text',
            success: function(data) {
                var menu = eval('(' + data + ')');
                warpMenu(menu);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == 'error') {
                    console.log('ajax error ! value of textStatus is error ! menu.js:line 34');
                }
            }
        });
    }
    //warpMenu
    function warpMenu(menu) {
        if (menu.code == 200) {
            var buffer1 = '<ul class=\"one-level\">';
            var buffer2 = '';
            var buffer3 = '';
            for (var i = 0, len1 = menu.data.length; i < len1; i++) {
                buffer1 += '<li class=\"has-children\">';
                var idOne = menu.data[i].id;
                var nameOne = menu.data[i].name;
                var iconOne = menu.data[i].icon;
                var urlOne = menu.data[i].url;
                var childrenOne = menu.data[i].children;
                buffer1 += '<a id=\"' + idOne + '\"><i class=\"fa fa ' + iconOne + '\"></i><span>' + nameOne + '</span><span class=\"menu-arrow fa\"></span><p class=\"url\">' + urlOne + '</p></a>';
                buffer2 += '<ul class=\"menu-submenu two-level\">';
                for (var j = 0, len2 = childrenOne.length; j < len2; j++) {
                    buffer2 += '<li class=\"has-children\">';
                    var idTwo = childrenOne[j].id;
                    var nameTwo = childrenOne[j].name;
                    var iconTwo = childrenOne[j].icon;
                    var urlTwo = childrenOne[j].url;
                    var childrenTwo = childrenOne[j].children;
                    buffer2 += '<a id=\"' + idTwo + '\"><i class=\"fa fa ' + iconTwo + '\"></i><span>' + nameTwo + '</span>';
                    if (!(typeof(childrenTwo) == 'undefined')) {
                        buffer2 += '<span class=\"menu-arrow fa\"></span>';
                    }
                    buffer2 += '<p class=\"url\">' + urlTwo + '</p></a>';
                    if (!(typeof(childrenTwo) == 'undefined')) {
                        buffer3 += '<ul class=\"menu-submenu three-level\">';
                        for (var k = 0, len3 = childrenTwo.length; k < len3; k++) {
                            buffer3 += '<li class=\"\">';
                            var idThree = childrenTwo[k].id;
                            var nameThree = childrenTwo[k].name;
                            var iconThree = childrenTwo[k].icon;
                            var urlThree = childrenTwo[k].url;
                            buffer3 += '<a id=\"' + idThree + '\"><i class=\"fa fa ' + iconThree + '\"></i><span>' + nameThree + '</span><p class=\"url\">' + urlThree + '</p></a>';
                            buffer3 += '</li>';
                        }
                        buffer3 += '</ul>';
                        buffer2 += buffer3;
                        buffer3 = '';
                    }
                    buffer2 += '</li>';
                }
                buffer2 += '</ul>';
                buffer1 += buffer2;
                buffer2 = '';
            }
            buffer1 += '</ul>';
            $('.main-menu').html(buffer1);
        } else {
            alert(menu.message);
        }
    }
    //打开和关闭菜单
    function openOrCloseMenu(options) {
        //打开关闭菜单
        $('body').on('click', '.has-children', function(event) {
            var obj = $(this);
            obj.toggleClass('open');
            event.stopPropagation(); //关键在于阻止冒泡
            return false;
        });
        $('body').on('click', '.menu-submenu li', function(event) {
            event.stopPropagation(); //关键在于阻止冒泡
            return false;
        });
    }
    //menu click to select tab
    function selectTab() {
        //菜单切换tabs
        $('body').on('click', '.main-menu li', function() {
            var obj = $(this).children('a').children('span:last');
            //判断是否有子菜单
            if (!obj.hasClass('menu-arrow')) {
                var title = $(this).children('a').children('span').html();
                var id = $(this).children('a').attr('id');
                var url = $(this).children('a').children('p').html();
                var icon = $(this).children('a').children('i').attr('class');
                var tabContent = '<iframe id=\"mainiframe\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"auto\" src=\"' + url + '\"></iframe>';
                $('#tab').tab('selectTab', {
                    icon: icon,
                    title: title,
                    hasClose: true,
                    tabContent: tabContent
                });
            }
            return false;
        });
    }
    var Menu = function(e, options) {
        this.element = e,
            this.defaults = {
                menu: '#menu',
                loadUrl: 'data/menu.txt'
            },
            this.options = $.extend({}, this.defaults, options);
    };
    Menu.prototype = {
        //通过url重新加载
        loadUrl: function(options) {
            $('.main-menu').html('');
            loadData(options.loadUrl);
        },
        //通过数据重新加载
        loadData: function(options) {
            $('.main-menu').html('');
            warpMenu(options.data);
        }
    };
    $.fn.menu = function(target, parm) {
        var menu = new Menu(this, target);
        if (typeof target == 'string' && typeof parm == 'string') {
            return menu[target](parm);
        }
        if (typeof target == 'string' && typeof parm == 'object') {
            var options = $.extend({}, menu.defaults, parm);
            return menu[target](options);
        }
        var state = $.data(this, 'menu');
        if (state) {
            var dataOptions = state.options;
            var newOptions = $.extend({}, dataOptions, target);
            $.data(this, 'menu', {
                options: newOptions,
                e: this
            });
        } else {
            $.data(this, 'menu', {
                options: $.extend({}, menu.options, target),
                e: this
            });
        }
        return this.each(function(){
　　　　　　_init(menu,true)
　　　　　});
    };
})(jQuery, window, document);

$(function() {
    $('#menu').menu(); //加载menu
    //加载数据 url
    $('#menu').menu('loadUrl', {
        loadUrl: 'data/menu.txt'
    });
});

 

标签：

相关文章