Js編寫的菜單樹
阿新 • • 發佈:2017-05-15
spl auth lan dcl lec 綁定 json app truct
只需要提供這種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編寫的菜單樹