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

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

赞 (0)

相关推荐

  • jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮

    jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮

    菜单(Menu)定义在一些 DIV 标记中,如下所示: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div> <span>Open</span> <div style="wid

  • SSH框架网上商城项目第4战之EasyUI菜单的实现

    SSH框架网上商城项目第4战之EasyUI菜单的实现

    上篇文章我们使用EasyUI搭建了后台页面的框架,点击这里查看,这一节我们主要使用EasyUI技术简单实现后台菜单,先将简单功能做出来,后期再继续丰富. 1. 实现左侧菜单 首先看一下效果图: 我们可以点击"基本操作"和"其他操作"来切换菜单选项,在具体的选项内,点击不同的连接,会在右侧显示出来.我们先把左边的菜单做出来. 左侧菜单内容主要有两个:"类别管理"和"商品管理".我们知道,上一节中,在aindex.jsp中应将后台

  • jQuery EasyUI API 中文文档 - Menu菜单

    jQuery EasyUI API 中文文档 - Menu菜单

    用 $.fn.menu.defaults 重写了 defaults. 复制代码 代码如下: <div id="mm" class="easyui-menu" style="width:120px;"> <div>New</div> <div> <span>Open</span> <div style="width:150px;"> <di

  • jQuery EasyUI实现右键菜单变灰不可用效果

    jQuery EasyUI实现右键菜单变灰不可用效果

    首先,实现"除此之外全部关闭"变灰不可用. 当只打开一个Tab选项卡时,右键菜单里"除此之外全部关闭"就应该变灰不可用,这样可以提示用户没有除这一个选项卡没有其他的选项卡了.程序实现很简单了,只要获得打开Tab选项卡的个数,如果个数为1,那么就把"除此之外全部关闭"变灰不可用就行了. var tabcount = $('#tabs').tabs('tabs').length; //tab选项卡的个数 if (tabcount <= 1) {

  • SSH框架网上商城项目第2战之基本增删查改、Service和Action的抽取

    SSH框架网上商城项目第2战之基本增删查改、Service和Action的抽取

    上一节<SSH框架网上商城项目第1战之整合Struts2.Hibernate4.3和Spring4.2>我们搭建好了Struts2.Hibernate和Spring的开发环境,并成功将它们整合在一起.这节主要完成一些基本的增删改查以及Service.Dao和Action的抽取. 1. Service层的抽取         上一节中,我们在service层简单写了save和update方法,这里我们开始完善该部分的代码,然后对service层的代码进行抽取. 1.1 完善CategorySer

  • 为EasyUI的Tab标签添加右键菜单的方法

    前期的准备工作: 1.下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换 2.在首页的HTML代码中:将 复制代码 代码如下: <div id="mm" class="easyui-menu" style="width:150px;"> <div id="mm-tabupdate">刷新

  • 轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

  • jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍

    jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍

    扩展自 $.fn.linkbutton.defaults.用 $.fn.menubutton.defaults 重写了defaults. 依赖 menu linkbutton 用法 复制代码 代码如下: <a href="javascript:void(0)" id="mb" iconCls="icon-edit">Edit</a> <div id="mm" style="width:1

  • 轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

    轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

    一.EasyUI创建简单的菜单 菜单(Menu)定义在一些 DIV 标记中,如下所示: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div> <span>Open</span> <div

  • SSH框架网上商城项目第1战之整合Struts2、Hibernate4.3和Spring4.2

    SSH框架网上商城项目第1战之整合Struts2、Hibernate4.3和Spring4.2

    本文开始做一个网上商城的项目,首先从搭建环境开始,一步步整合S2SH.这篇博文主要总结一下如何整合Struts2.Hibernate4.3和Spring4.2. 整合三大框架得先从搭建各部分环境开始,也就是说首先得把Spring,Hibernate和Struts2的环境搭建好,确保它们没有问题了,再做整合.这篇博文遵从的顺序是:先搭建Spring环境-->然后搭建Hibernate环境--> 整合Spring和Hibernate --> 搭建Struts2环境 --> 整合Spri

随机推荐