首页 > 代码库 > Js编写的菜单树
Js编写的菜单树
只需要提供这种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 879083421@qq.com */ 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编写的菜单树
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。