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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 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 团购折扣计算公式
2011/11/24 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python装饰器用法实例总结
2018/02/07 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
python函数的万能参数传参详解
2019/07/26 Python
Python调用C/C++的方法解析
2020/08/05 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
土木工程应届生求职信
2013/10/31 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
租房协议书范本
2014/04/09 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
学雷锋倡议书
2015/01/19 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫