Js編寫的菜單樹

標籤：auto   nbsp   display   func   mail   容器   ati   縮排   index   

 

只需要提供這種JSON格式就ok了 其他的都可以直接引用這個代碼進去

var testMenu=[    {        "name": "一級菜單",        "submenu": [            {                "name": "二級菜單",                "url": ""            },            {                "name": "二級菜單",                "url": ""            }        ]    },    {        "name": "一級菜單",        "submenu": [            {                "name": "二級菜單",                "url": ""            },            {                "name": "二級菜單",                "submenu": [                    {                        "name": "三級菜單",                        "submenu": [                            {                                "name": "四級菜單",                                "url": ""                            }                        ]                    },                    {                        "name": "三級菜單",                        "url": ""                    }                ]            },            {                "name": "二級菜單",                "url": ""            },            {                "name": "二級菜單",                "submenu": [                    {                        "name": "三級菜單",                        "submenu": [                            {                                "name": "四級菜單",                                "url": ""                            },                            {                                "name": "四級菜單",                                "submenu": [                                    {                                        "name": "五級菜單",                                        "url": ""                                    },                                    {                                        "name": "五級菜單",                                        "url": ""                                    }                                ]                            }                        ]                    },                    {                        "name": "三級菜單",                        "url": ""                    }                ]            },            {                "name": "二級菜單",                "url": ""            }        ]    },    {        "name": "一級菜單",        "submenu": [            {                "name": "二級菜單",                "url": ""            },            {                "name": "二級菜單",                "url": ""            },            {                "name": "二級菜單",                "url": ""            }        ]    }];

只要這種JSON格式就ok了 且上面的參數名 name submenu url是叫這樣的名字就可以了 ，然後直接可以在頁面HTML如下：

<div class="wrap-menu"></div>

CSS代碼如下：

<style type="text/css">    .wrap-menu { overflow:auto; width:300px; background:#F6F6F6; font:12px/1.5 Tahoma,Arial,sans-serif}    .wrap-menu ul{ list-style:none; margin:0; padding:0;}    .wrap-menu ul li{ text-indent:3em; white-space:nowrap; }    .wrap-menu ul li h2{ cursor:pointer; height:100%; width:100%; margin:0 0 1px 0; font:12px/31px ‘宋體‘; color:#fff; background:red;}    .wrap-menu ul li a{ display:block; outline:none; height:25px; line-height:25px; margin:1px 0; color:#1A385C; text-decoration:none;}    .wrap-menu ul li img{ margin-right:10px; margin-left:-17px; margin-top:9px; width:7px; height:7px; background:url(images/arrow.gif) no-repeat; border:none;}    .wrap-menu ul li img.unfold{ background-position:0 -9px;}    .wrap-menu ul li a:hover{ background-color:#ccc; background-image:none;}  </style>

JS代碼如下：

/** * JSON無限摺疊菜單 * @constructor {AccordionMenu} * @param {options} 對象 * @date 2013-12-13 * @author tugenhua * @email [email protected] */ function AccordionMenu(options) {    this.config = {        containerCls        : ‘.wrap-menu‘,                // 外層容器        menuArrs            :  ‘‘,                         //  JSON傳進來的資料        type                :  ‘click‘,                    // 預設為click 也可以mouseover        renderCallBack      :  null,                       // 渲染html結構後回調        clickItemCallBack   : null                         // 每點擊某一項時候回調    };    this.cache = {            };    this.init(options); }  AccordionMenu.prototype = {    constructor: AccordionMenu,    init: function(options){        this.config = $.extend(this.config,options || {});        var self = this,            _config = self.config,            _cache = self.cache;                // 渲染html結構        $(_config.containerCls).each(function(index,item){                        self._renderHTML(item);            // 處理點擊事件            self._bindEnv(item);        });    },    _renderHTML: function(container){        var self = this,            _config = self.config,            _cache = self.cache;        var ulhtml = $(‘<ul></ul>‘);        $(_config.menuArrs).each(function(index,item){            var lihtml = $(‘<li><h2>‘+item.name+‘</h2></li>‘);            if(item.submenu && item.submenu.length > 0) {                self._createSubMenu(item.submenu,lihtml);            }            $(ulhtml).append(lihtml);        });        $(container).append(ulhtml);                _config.renderCallBack && $.isFunction(_config.renderCallBack) && _config.renderCallBack();                // 處理層級縮排        self._levelIndent(ulhtml);    },    /**     * 建立子功能表     * @param {array} 子功能表     * @param {lihtml} li項     */    _createSubMenu: function(submenu,lihtml){        var self = this,            _config = self.config,            _cache = self.cache;        var subUl = $(‘<ul></ul>‘),            callee = arguments.callee,            subLi;                $(submenu).each(function(index,item){            var url = item.url || ‘javascript:void(0)‘;            subLi = $(‘<li><a href="‘+url+‘">‘+item.name+‘</a></li>‘);            if(item.submenu && item.submenu.length > 0) {                $(subLi).children(‘a‘).prepend(‘<img src="images/blank.gif" alt=""/>‘);                callee(item.submenu, subLi);            }            $(subUl).append(subLi);        });        $(lihtml).append(subUl);    },    /**     * 處理層級縮排     */    _levelIndent: function(ulList){        var self = this,            _config = self.config,            _cache = self.cache,            callee = arguments.callee;               var initTextIndent = 2,            lev = 1,            $oUl = $(ulList);                while($oUl.find(‘ul‘).length > 0){            initTextIndent = parseInt(initTextIndent,10) + 2 + ‘em‘;             $oUl.children().children(‘ul‘).addClass(‘lev-‘ + lev)                        .children(‘li‘).css(‘text-indent‘, initTextIndent);            $oUl = $oUl.children().children(‘ul‘);            lev++;        }        $(ulList).find(‘ul‘).hide();        $(ulList).find(‘ul:first‘).show();        },    /**     * 綁定事件     */    _bindEnv: function(container) {        var self = this,            _config = self.config;        $(‘h2,a‘,container).unbind(_config.type);        $(‘h2,a‘,container).bind(_config.type,function(e){            if($(this).siblings(‘ul‘).length > 0) {                $(this).siblings(‘ul‘).slideToggle(‘slow‘).end().children(‘img‘).toggleClass(‘unfold‘);            }            $(this).parent(‘li‘).siblings().find(‘ul‘).hide()                   .end().find(‘img.unfold‘).removeClass(‘unfold‘);            _config.clickItemCallBack && $.isFunction(_config.clickItemCallBack) && _config.clickItemCallBack($(this));        });    } };

代碼初始化方式如下：

$(function(){    new AccordionMenu({menuArrs:testMenu});});

 

Js編寫的菜單樹