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

 更新时间:2012年01月13日 23:55:55   作者:  
早上打开邮箱,一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单
11年9月份项目刚开始时,找到了园中的疯狂秀才。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了!一直搁在那……还好最后找到了

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

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

相关文章

  • jQuery 判断元素上是否绑定了事件

    jQuery 判断元素上是否绑定了事件

    怎样判断有没有绑定一个事件,大家可以参考下。
    2009-10-10
  • jquery tools之tabs 选项卡/页签

    jquery tools之tabs 选项卡/页签

    jquery用这么久了,觉得虽然没ExtJS等框架全面,功能强大,但是也确实做到了“the write less,do more”,而且学起来也方便,只需要仔细研读一下它官方网站的API Reference,操作起来基本问题不是太大。
    2009-07-07
  • jQuery 3 中的新增功能汇总介绍

    jQuery 3 中的新增功能汇总介绍

    本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了,这个版本是可能对你现有的项目产生太大的影响,因为没有引入太多许多重大更改。
    2016-06-06
  • jQuery powerFloat万能浮动层下拉层插件使用介绍

    jQuery powerFloat万能浮动层下拉层插件使用介绍

    支持hover, click, focus以及无事件触发;支持多达12种位置的定位,出界自动调整;支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等;可自定义装载容器;内置UI不错的装载容器;支持鼠标跟随等。
    2010-12-12
  • jQuery Easyui快速入门教程

    jQuery Easyui快速入门教程

    jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面,下面小编带领大家一起学习jquery easyui入门知识,一起看看吧
    2016-08-08
  • 使用struts2+Ajax+jquery验证用户名是否已被注册

    使用struts2+Ajax+jquery验证用户名是否已被注册

    这篇文章主要介绍了使用struts2+Ajax+jquery验证用户名是否已被注册的相关资料,需要的朋友可以参考下
    2016-03-03
  • JQuery限制复选框checkbox可选中个数的方法

    JQuery限制复选框checkbox可选中个数的方法

    这篇文章主要介绍了JQuery限制复选框checkbox可选中个数的方法,涉及jQuery操作复选框长度判断与属性修改的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • jQuery实现选项卡切换图片

    jQuery实现选项卡切换图片

    这篇文章主要为大家详细介绍了jQuery实现选项卡切换图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • jQuery中insertBefore()方法用法实例

    jQuery中insertBefore()方法用法实例

    这篇文章主要介绍了jQuery中insertBefore()方法用法,实例分析了insertBefore()方法的功能、定义及把匹配的元素插入到另一个指定的元素集合前面的使用技巧,需要的朋友可以参考下
    2015-01-01

最新评论