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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
javascript 写类方式之十
2009/07/05 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
快速查询Python文档方法分享
2017/12/27 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
wxpython绘制音频效果
2019/11/18 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
房地产项目建议书
2014/03/12 职场文书
求职意向书范文
2014/04/01 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Python if else条件语句形式详解
2022/03/24 Python
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis