使用 JQuery EasyUI 创建左侧导航菜单,菜单的数据由后台服务提供。

效果图

HTML 元素

<div id="menuAccordion"></div>

JavaScript 代码

$(function() {
var basePath = $('#basePath').val(); // 初始化
$('#menuAccordion').accordion({
fillSpace: true,
fit: true,
border: false,
animate: false
}); $.post(basePath + 'sys/menu/tree', {type: 1}, function(data) {
if(data) {
$.each(data, function(index, item) {
var selected = false;
if (index == 0) {
selected = true;
}
// Accordion 折叠面板
$('#menuAccordion').accordion('add', {
title: item.text,
content: "<ul id='menu_tree_" + item.id + "'></ul>",
selected: selected
});
// 树形菜单
$('#menu_tree_' + item.id).tree({
data: item.children,
onClick: function(node) {
if (node.children.length != 0) {
return;
}
// 添加选项卡
addTab('tabs', node.text, node.url);
}
});
});
}
}, 'json');
}); /**
* 添加标签页面板
* @param tabsId 标签页 ID
* @param title 标签页面板的标题文字
* @param url 加载远程内容来填充标签页面板的 URL
*/
function addTab(tabsId, title, url) {
var $tabs = $('#' + tabsId);
if($tabs.tabs('exists', title)) {
$tabs.tabs('close', title);
}
$tabs.tabs('add', {
title: title,
href: url,
closable: true
})
}

数据格式(JSON)

[
{
"id": 1,
"parentId": 0,
"url": "javascript:void(0)",
"text": "系统设置",
"checked": false,
"state": "open",
"children": [
{
"id": 2,
"parentId": 1,
"url": "sys/menu/index",
"text": "菜单管理",
"checked": false,
"state": null,
"children": []
},
{
"id": 3,
"parentId": 1,
"url": "sys/role/index",
"text": "角色管理",
"checked": false,
"state": null,
"children": []
},
{
"id": 4,
"parentId": 1,
"url": "sys/user/index",
"text": "用户管理",
"checked": false,
"state": null,
"children": []
}
]
},
{
"id": 8,
"parentId": 0,
"url": "javascript:void(0)",
"text": "基础设置",
"checked": false,
"state": "open",
"children": []
}
]

使用 EasyUI 创建左侧导航菜单的更多相关文章

  1. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  2. 为SharePoint网站创建自定义导航菜单

    转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...

  3. (转)jquery仿天猫商城左侧导航菜单

    原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...

  4. SpringMVC+EasyUI实现页面左侧导航菜单

    1. 效果图展示 2. 工程目录结构 注意: webapp下的resources目录放置easyui和js(jQuery文件是另外的)                    3. 代码 index.j ...

  5. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

  6. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  7. 使用Axure设计基于中继器的左侧导航菜单

    实现效果: 使用组件: 设计详解: 一.设计外层菜单 1.拖一个矩形,在属性栏中命名cd1,设置宽高为200*45,背景色#393D49,双击设置按钮名称为“默认展开”,字体大小16,字体颜色#C2C ...

  8. 基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单

    本文使用的框架版本为: bootstrap3,Jquery2.1.0  (其他jquery可能会报错,菜单项不执行 效果如下: 1.在项目中引入框架: <link rel="style ...

  9. 处理EasyUI中tab的切换问题以及accordion左侧导航栏的代码实现

    //左侧导航菜单 function leftMenus() { //$(".easyui-accordion").empty(); $.each(_menus.menus, fun ...

随机推荐

  1. Wowza流媒体Live直播和VOD点播配置实战-attach

    Wowza是当今可以说最流行的流媒体服务器之一,近来因为需要搭建相应的服务器,但又不想用camera等作真实的直播,所以想办法用媒体文件转换成直播流再提供给Wowza进行直播.这里把该设置步骤以及设计 ...

  2. Objective-C系列

    我的Objective-C系列文章和坚持写博客的感想   做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都 ...

  3. 使用Row_Number()分页优化

    记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题   最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且 ...

  4. asp.net中TextBox里面实现回车触发指定事件

    原文:asp.net中TextBox里面实现回车触发指定事件 我在一个user_top用户控件里面做了个包括搜索的功能.然后再一个页面中添加这个用户控件.浏览时候在textbox里面输入搜索内容后.下 ...

  5. Light OJ 1316 A Wedding Party 最短路+状态压缩DP

    题目来源:Light OJ 1316 1316 - A Wedding Party 题意:和HDU 4284 差点儿相同 有一些商店 从起点到终点在走过尽量多商店的情况下求最短路 思路:首先预处理每两 ...

  6. php连接sql server 2008数据库

    原文:php连接sql server 2008数据库 关于php连接sql server 2008的问题,2000的版本可以直接通过php中的配置文件修改,2005以上的版本就不行了,需要使用微软公司 ...

  7. 使用Prism提供的类实现WPF MVVM点餐Demo

    使用Prism提供的类实现WPF MVVM点餐Demo 由于公司开发的技术需求,近期在学习MVVM模式开发WPF应用程序.进过一段时间的学习,感受到:学习MVVM模式,最好的方法就是用MVVM做几个D ...

  8. SVN服务器搭建(1)

    转自:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html SVN服务器搭建和使用(一) Subversion是优秀的版 ...

  9. waitFor和waitForAny的实现

    waitFor和waitForAny的实现 在实现waitFor方法之前,我们先要搞明白下面这些问题: 1. waitFor方法的形参有限制吗? 没有!如果形参是Task类型,不应该启动Task,如果 ...

  10. 在PHP中如何连接到数据库

    首先我们先运行WampServer中的phpMyAdmin随即弹出phpMyAdmin页面   在弹出的页面中左边是数据库列表  右边是相应的设置 选择一个数据库  在里面创建一张数据表  注意创建数 ...