jQuery-Easyui 1.2 实现多层菜单效果的代码
更新时间：2012年01月13日 23:55:55 作者：
早上打开邮箱，一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单
11年9月份项目刚开始时，找到了园中的疯狂秀才。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了！一直搁在那……还好最后找到了
今天这位朋友想要这块，就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段 呵呵
需求：菜单比如“导航菜单-基础数据-基础数据1-子菜单1”
效果：
/****************************************Index页面******************************************/
var _menus = {
basic: [{
"menuid": "10",
"icon": "icon-sys",
"menuname": "常用菜单",
"menus":
[{
"menuid": "111",
"menuname": "基础数据1",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "113",
"menuname": "基础数据12",
"icon": "icon-nav",
"url": "#"
},
//
{
"menuid": "119",
"menuname": "这个是有子菜单的",
"icon": "icon-nav",
"menus": [{
"menuid": "120",
"menuname": "子菜单1",
"icon": "icon-nav",
"menus": [{
"menuid": "120",
"menuname": "子子菜单11111",
"icon": "icon-nav",
"url": "#"
}]
}]
},
//
{
"menuid": "115",
"menuname": "基础数据13",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "117",
"menuname": "基础数据14",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "119",
"menuname": "基础数据15",
"icon": "icon-nav",
"url": "em/enterpriseChannelObtend.action"
}]
}, {
"menuid": "20",
"icon": "icon-sys",
"menuname": "测试一",
"menus": [{
"menuid": "211",
"menuname": "测试一11",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "213",
"menuname": "测试一22",
"icon": "icon-nav",
"url": "#"
}]
}],
point: [{
"menuid": "20",
"icon": "icon-sys",
"menuname": "邮件列表",
"menus": [{
"menuid": "211",
"menuname": "邮件用途",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "213",
"menuname": "邮件调整",
"icon": "icon-nav",
"url": "#"
}]
}]
};
源码下载 jQuery-Easyui-12-three-Demo.rar
今天这位朋友想要这块，就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段 呵呵
需求：菜单比如“导航菜单-基础数据-基础数据1-子菜单1”
效果：
复制代码 代码如下:
/****************************************Index页面******************************************/
var _menus = {
basic: [{
"menuid": "10",
"icon": "icon-sys",
"menuname": "常用菜单",
"menus":
[{
"menuid": "111",
"menuname": "基础数据1",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "113",
"menuname": "基础数据12",
"icon": "icon-nav",
"url": "#"
},
//
{
"menuid": "119",
"menuname": "这个是有子菜单的",
"icon": "icon-nav",
"menus": [{
"menuid": "120",
"menuname": "子菜单1",
"icon": "icon-nav",
"menus": [{
"menuid": "120",
"menuname": "子子菜单11111",
"icon": "icon-nav",
"url": "#"
}]
}]
},
//
{
"menuid": "115",
"menuname": "基础数据13",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "117",
"menuname": "基础数据14",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "119",
"menuname": "基础数据15",
"icon": "icon-nav",
"url": "em/enterpriseChannelObtend.action"
}]
}, {
"menuid": "20",
"icon": "icon-sys",
"menuname": "测试一",
"menus": [{
"menuid": "211",
"menuname": "测试一11",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "213",
"menuname": "测试一22",
"icon": "icon-nav",
"url": "#"
}]
}],
point: [{
"menuid": "20",
"icon": "icon-sys",
"menuname": "邮件列表",
"menus": [{
"menuid": "211",
"menuname": "邮件用途",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "213",
"menuname": "邮件调整",
"icon": "icon-nav",
"url": "#"
}]
}]
};
源码下载 jQuery-Easyui-12-three-Demo.rar
您可能感兴趣的文章:
- jQuery EasyUI API 中文文档 - Menu菜单
- jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
- 为EasyUI的Tab标签添加右键菜单的方法
- jQuery EasyUI实现右键菜单变灰不可用效果
- jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
- 轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
- 轻松学习jQuery插件EasyUI EasyUI创建树形菜单
- SSH框架网上商城项目第1战之整合Struts2、Hibernate4.3和Spring4.2
- SSH框架网上商城项目第2战之基本增删查改、Service和Action的抽取
- SSH框架网上商城项目第4战之EasyUI菜单的实现
相关文章
下面小编就为大家带来一篇ajax在兼容模式下失效的快速解决方法。小编觉得挺不错的。现在分享给大家，给大家一个参考2016-03-03
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
支持点击label实现checkbox组选择，头部选项，如全选/ 取消全选 /关闭功能,支持键盘选择等等，下面与大家分享下具体使用2013-05-05
最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些jquery选择器、属性设置用法，供大家参考2013-09-09
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
JQuery在IE8兼容性视图模式下操作Select的Options的Bug在本文进行重现并给出详细的解决方法，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
本节与大家分享的多行文字图片滚动效果，基于jquery实现，比较实用，有喜欢的朋友可以收藏下2014-09-09
这篇文章主要介绍了element form 校验数组每一项的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
本篇文章是对用jquery实现简单的ajax的实现方法进行了详细的分析介绍，需要的朋友参考下2013-07-07
jQuery操作checkbox选择(list/table)
本文将介绍下checkbox list选择及checkbox table选中附效果图，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
在普通情况下我们要用原生类、或者自定义类创建实例要用new运算符，使构造函数创建一个实例，并且实例继承构造器prototype上的所有公有方法2011-12-12
jQuery是一个JavaScript库，它简化了客户端JavaScript编程的过程，特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。感兴趣的小伙伴可以参考阅读2023-04-04
最新评论