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 相关文章推荐
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
Vue事件修饰符native、self示例详解
Jul 09 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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP之header函数详解
2021/03/02 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
Python 深入理解yield
2008/09/06 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
如何在sublime编辑器中安装python
2020/05/20 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
教师档案管理制度
2014/01/23 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
捐书活动倡议书
2015/04/27 职场文书
农业项目投资意向书
2015/05/09 职场文书
预备党员群众意见
2015/06/01 职场文书
2015中学教学工作总结
2015/07/22 职场文书
纪律委员竞选稿
2015/11/19 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书