发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单，只需要简单的几行代码就ok了。

特意做了一个小小的demo供大家参考，还把怎么实现tab的右键菜单附上。

源码：
js部分：

$(function () {
//动态菜单数据
var treeData = [{
text : "菜单",
children : [{
text : "一级菜单1",
attributes : {
url : ""
}
}, {
text : "一级菜单2",
attributes : {
url : ""
}
}, {
text : "一级菜单3",
state : "closed",
children : [{
text : "二级菜单1",
attributes : {
url : ""
}
}, {
text : "二级菜单2",
attributes : {
url : ""
}
}, {
text : "二级菜单3",
attributes : {
url : ""
}
}
]
}
]
}
];

//实例化树形菜单
$("#tree").tree({
data : treeData,
lines : true,
onClick : function (node) {
if (node.attributes) {
Open(node.text, node.attributes.url);
}
}
});
//在右边center区域打开菜单，新增tab
function Open(text, url) {
if ($("#tabs").tabs('exists', text)) {
$('#tabs').tabs('select', text);
} else {
$('#tabs').tabs('add', {
title : text,
closable : true,
content : text
});
}
}

//绑定tabs的右键菜单
$("#tabs").tabs({
onContextMenu : function (e, title) {
e.preventDefault();
$('#tabsMenu').menu('show', {
left : e.pageX,
top : e.pageY
}).data("tabTitle", title);
}
});

//实例化menu的onClick事件
$("#tabsMenu").menu({
onClick : function (item) {
CloseTab(this, item.name);
}
});

//几个关闭事件的实现
function CloseTab(menu, type) {
var curTabTitle = $(menu).data("tabTitle");
var tabs = $("#tabs");

if (type === "close") {
tabs.tabs("close", curTabTitle);
return;
}

var allTabs = tabs.tabs("tabs");
var closeTabsTitle = [];

$.each(allTabs, function () {
var opt = $(this).panel("options");
if (opt.closable && opt.title != curTabTitle && type === "Other") {
closeTabsTitle.push(opt.title);
} else if (opt.closable && type === "All") {
closeTabsTitle.push(opt.title);
}
});

for (var i = 0; i < closeTabsTitle.length; i++) {
tabs.tabs("close", closeTabsTitle[i]);
}
}
});

html部分：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.west{
width:200px;
padding:10px;
}
.north{
height:100px;
}
</style>
</head>
<body class="easyui-layout">
<div region="north" class="north" title="____′↘夏悸 http://easyui.btboys.com">
<h1>最简单的左右结构实现，及tab的右键菜单实现，右键查看源码</h1>
</div>
<div region="center" title="center">
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首页"></div>
</div>
</div>
<div region="west" class="west" title="menu">
<ul id="tree"></ul>
</div>

<div id="tabsMenu" class="easyui-menu" style="width:120px;">
<div name="close">关闭</div>
<div name="Other">关闭其他</div>
<div name="All">关闭所有</div>
</div>
</body>
</html>

easyui最简单的左右布局实现，及tab的右键菜单实现的更多相关文章

  1. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...

  2. Xamarin.Android之简单的抽屉布局

    0x01 前言 相信对于用过Android版QQ的,应该都不会陌生它那个向右滑动的菜单(虽说我用的是Lumia) 今天就用Xamarin.Android实现个比较简单的抽屉布局.下面直接进正题. 0x ...

  3. 使用Struts2和jQuery EasyUI实现简单CRUD系统（转载汇总）

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  4. twrp 2.7.0 ui.xml简单分析，布局讲解，第一章

    twrp 的ui.xml文件在bootable/recovery/gui/devices/$(DEVICE_RESOLUTION)/res目录里面 下面我主要分析的是720x1280分辨率的界面布局及 ...

  5. 简单的RelativeLayout布局

    简单的RelativeLayout布局实例 <?xml version="1.0" encoding="utf-8"?> <RelativeL ...

  6. CSS里总算是有了一种简单的垂直居中布局的方法了

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 使用easyui为tab页增加右键菜单

    在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclip ...

  8. 【干货】jsMind思维导图整合Easyui的右键菜单

    原材料: 1.web版本的JavaScript思维导图(BSD开源协议)[戳这里去官网]. 2.easyui最新版[戳这里去官网]. 这里是原本的jsMind: 在线测试地址 :http://hizz ...

  9. 实现JQuery EasyUI右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

随机推荐

  1. HDU 1402 A * B Problem Plus (FFT求高精度乘法)

    A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  2. JavaScript字符串api简单说明

    1.可返回指定位置的字符 stringObject.charAt(index); 2.返回的是位于指定位置的字符的编码 stringObject.charCodeAt(index); 3.用于连接两个 ...

  3. 想使用gevent、mysql、sqlalchemy实现python项目协程异步达到并发的效果

    如题,但是查看了很多资料,都说python这边的mysql不支持异步并发,只能阻塞进行,心塞30秒,暂时放弃这方面的研究 如果不操作数据库的化,比如请求url.操作文件,还是可以用gevent来异步实 ...

  4. centos7.2 kvm虚拟化管理平台WebVirtMgr部署

    在服务器上部署kvm虚拟化,虚出多台VM出来,以应对新的测试需求.当KVM宿主机越来越多,需要对宿主机的状态进行调控,决定采用WebVirtMgr作为kvm虚拟化的web管理工具,图形化的WEB,让人 ...

  5. XDebug 教程

    安装说明: PHP调试时,不得不提XDEBUG这个调试利器.学习PHP以来,几乎所有的问题我都利用它来解决. 首先关于如何安装,不在赘述,请自行google之.(需要特别注意的是:PHP5.2 和5. ...

  6. CentOS 7 yum安装失败问题

    在CentOS 7中,执行yum安装,一直报错,错误信息如下 其实在上述的错误信息中,上述中的repodata/repomd.xml文件据说是/mnt目录rpm包的目录,路径 在/mnt中因为没有/r ...

  7. Stack Exchange 的架构

    近日,Stack Exchange系统管理员blog上发布了一篇关于Stack Exchange的架构一瞥,其包括了Stack Overflow, Server Fault 和 Super User的 ...

  8. Django的信号机制详解

    Django提供一种信号机制.其实就是观察者模式,又叫发布-订阅(Publish/Subscribe) .当发生一些动作的时候,发出信号,然后监听了这个信号的函数就会执行. Django内置了一些信号 ...

  9. 修改 Ubuntu 13.04 LAMP 服务器端口号

    因为今天想让一台Ubuntu 13.04服务器对外 web 服务的端口号为8000,自己改了一下,但是就是无法访问,端口后依然为 80.所以在网上找了一下修改端口的办法,原来我还少修改了一个文件,这里 ...

  10. 【Python】self的用法扫盲

    在Python中,我们有两个重要的概念:类与实例 例如:我们在现实生活中人就是一个类,实例就是具体到某一个男人(张三.李四等) 1.类:定义人这个类 class People(object): pas ...