jQuery-Easyui 1.2 实现多层菜单效果的代码


Posted in Javascript onJanuary 13, 2012

11年9月份项目刚开始时,找到了园中的疯狂秀才。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了!一直搁在那……还好最后找到了

今天这位朋友想要这块,就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段 呵呵
需求:菜单比如“导航菜单-基础数据-基础数据1-子菜单1”
效果:

jQuery-Easyui 1.2 实现多层菜单效果的代码

js代码如下
/****************************************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
Javascript 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
20个最新的jQuery插件
Jan 13 #Javascript
JSON 数据格式介绍
Jan 13 #Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 #Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 #Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 #Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 #Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 #Javascript
You might like
使用PHP计算两个路径的相对路径
2013/06/14 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
浅析Javascript使用include/require
2013/11/13 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python处理二进制数据的方法
2015/06/03 Python
Python中functools模块函数解析
2017/03/12 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python和JavaScript哪个容易上手
2020/06/23 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
《三峡》教学反思
2014/03/01 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书