JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现 - 摩根船长 - 博客园
发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单，只需要简单的几行代码就ok了。
特意做了一个小小的demo供大家参考，还把怎么实现tab的右键菜单附上。
源码：js部分：
$(function () {
//动态菜单数据
var treeData = [{
text : "菜单",
children : [{
text : "一级菜单1",
attributes : {
text : "一级菜单2",
attributes : {
text : "一级菜单3",
state : "closed",
children : [{
text : "二级菜单1",
attributes : {
text : "二级菜单2",
attributes : {
text : "二级菜单3",
attributes : {
//实例化树形菜单
$("#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);
$('#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);
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. i++) {
tabs.tabs("close", closeTabsTitle[i]);
html部分：
&!DOCTYPE html&
&meta charset=utf-8 /&
&title&JS Bin&/title&
&script class="jsbin" src="/jquery-1.7.2.min.js"&&/script&
&link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"&
&script type="text/javascript" src="/easyui/jquery.easyui.min.js"&&/script&
&!--[if IE]&
&script src="/svn/trunk/html5.js"&&/script&
&![endif]--&
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
width:<span style="background-color: #f5f5f5; color: #px;
padding:10px;
height:<span style="background-color: #f5f5f5; color: #px;
&body class="easyui-layout"&
&div region="north" class="north" title="____&↘夏悸
&h1&最简单的左右结构实现，及tab的右键菜单实现，右键查看源码&/h1&
&div region="center" title="center"&
&div class="easyui-tabs" fit="true" border="false" id="tabs"&
&div title="首页"&&/div&
&div region="west" class="west" title="menu"&
&ul id="tree"&&/ul&
&div id="tabsMenu" class="easyui-menu" style="width:120"&
&div name="close"&关闭&/div&
&div name="Other"&关闭其他&/div&
&div name="All"&关闭所有&/div&
随笔 - 114
最大化所有窗口
最小化所有窗口
停靠所有窗口jQuery EasyUI 教程
jQuery EasyUI 布局插件 - Tabs 标签页/选项卡
通过 $.fn.tabs.defaults 重写默认的 defaults。
The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.
linkbutton
创建标签页（Tabs）
1、通过标记创建标签页（Tabs）
从标记创建标签页（Tabs）更容易，我们不需要写任何 JavaScript 代码。记住把 'easyui-tabs' class 添加到 &div& 标记。每个标签页面板（tab panel）通过子 &div& 标记被创建，其用法与面板（panel）一样。
&div id="tt" class="easyui-tabs" style="width:500height:250"&
&div title="Tab1" style="padding:20display:"&
&&&&&&&&tab1
&div title="Tab2" data-options="closable:true" style="overflow:padding:20display:"&
&&&&&&&&tab2
&div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20display:"&
&&&&&&&&tab3
2、编程创建标签页（Tabs）
现在我们编程创建标签页（Tabs），我们同时捕捉 'onSelect' 事件。
$('#tt').tabs({
border:false,
onSelect:function(title){
&&&&&&&&alert(title+' is selected');
添加新的标签页面板（tab panel）
通过迷你工具添加一个新的标签页面板（tab panel），迷你工具图标（8x8）放置在关闭按钮前。
// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
&&&&&&&&iconCls:'icon-mini-refresh',
&&&&&&&&handler:function(){
&&&&&&&&&&&&alert('refresh');
获取选中的标签页（Tab）
// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options'). // 相应的标签页（tab）对象
标签页（Tabs）容器的宽度。
标签页（Tabs）容器的高度。
当设置为 true 时，就不用背景容器图片来呈现 tab 条。
当设置为 true 时，就设置标签页（Tabs）容器的尺寸以适应它的父容器。
当设置为 true 时，就显示标签页（Tabs）容器边框。
scrollIncrement
每按一次 tab 滚动按钮，滚动的像素数。
scrollDuration
每一个滚动动画应该持续的毫秒数。
array,selector
放置在头部的左侧或右侧的工具栏，可能的值：
1、数组，指示工具组，每个工具选项都和链接按钮（Linkbutton）一样。
2、选择器，指示包含工具的 &div&。
代码实例：
通过数组定义工具。
$('#tt').tabs({
&&&&tools:[{
&&&&&&&&iconCls:'icon-add',
&&&&&&&&handler:function(){
&&&&&&&&&&&&alert('add')
&&&&&&&&iconCls:'icon-save',
&&&&&&&&handler:function(){
&&&&&&&&&&&&alert('save')
通过已有的 DOM 容器定义工具。
$('#tt').tabs({
&&&&tools:'#tab-tools'
&div id="tab-tools"&
&&&&&a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"&&/a&
&&&&&a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"&&/a&
toolPosition
工具栏位置。可能的值：'left'、'right'。该属性自版本 1.3.2 起可用。
tabPosition
标签页（tab）位置。可能的值：'top'、'bottom'、'left'、'right'。该属性自版本 1.3.2 起可用。
headerWidth
标签页（tab）头部宽度，只有当 tabPosition 设置为 'left' 或 'right' 时才有效。该属性自版本 1.3.2 起可用。
tab 条的宽度。该属性自版本 1.3.4 起可用。
tab 条的高度。该属性自版本 1.3.4 起可用。
初始化选定的标签页索引。该属性自版本 1.3.5 起可用。
showHeader
当设置为 true 时，显示标签页（tab）头部。该属性自版本 1.3.5 起可用。
当一个 ajax 标签页面板（tab panel）完成加载远程数据时触发。
title,index
当用户选择一个标签页面板（tab panel）时触发。
onUnselect
title,index
当用户未选择一个标签页面板（tab panel）时触发。该事件自版本 1.3.5 起可用。
onBeforeClose
title,index
当一个标签页面板（tab panel）被关闭前触发，返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板（tab panel）前显示确认对话框。
$('#tt').tabs({
onBeforeClose: function(title){
&&&&return confirm('Are you sure you want to close ' + title);
// using the async confirm dialog
$('#tt').tabs({
onBeforeClose: function(title,index){
&&&&var target =
&&&&$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
&&&&&&&&if (r){
&&&&&&&&&&&&var opts = $(target).tabs('options');
&&&&&&&&&&&&var bc = opts.onBeforeC
&&&&&&&&&&&&opts.onBeforeClose = function(){};
// allowed to close now
&&&&&&&&&&&&$(target).tabs('close',index);
&&&&&&&&&&&&opts.onBeforeClose =
// restore the event function
&&&&&&&&// prevent from closing
title,index
当用户关闭一个标签页面板（tab panel）时触发。
title,index
当一个新的标签页面板（tab panel）被添加时触发。
title,index
当一个标签页面板（tab panel）被更新时触发。
onContextMenu
e, title,index
当一个标签页面板（tab panel）被右键点击时触发。
返回标签页（tabs）选项（options）。
返回全部的标签页面板（tab panel）。
调整标签页（tabs）容器的尺寸并做布局。
添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。
当添加一个新的标签页面板（tab panel）时，它将被选中。
如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。
// add a unselected tab panel
$('#tt').tabs('add',{
&&&&title: 'new tab',
&&&&selected: false
关闭一个标签页面板（tab panel），'which' 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。
获取指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
getTabIndex
获取指定的标签页面板（tab panel）索引。
getSelected
获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。
showHeader
显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。
hideHeader
隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。
指示指定的面板是否已存在，'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。
更新指定的标签页面板（tab panel），param 参数包含两个属性：
tab：被更新的标签页面板（tab panel）。
options：面板（panel）的选项（options）。
代码实例：
// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected');
// get selected panel
$('#tt').tabs('update', {
&&&&tab: tab,
&&&&options: {
&&&&&&&&title: 'New Title',
&&&&&&&&href: 'get_content.php'
// the new content URL
// call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected');
// get selected panel
tab.panel('refresh', 'get_content.php');
启用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。
代码实例：
$('#tt').tabs('enableTab', 1);&&&&// enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2');&&&&enable the tab panel that has 'Tab2' title
disableTab
禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。
代码实例：
$('#tt').tabs('disableTab', 1);&&&&// disable the second tab panel.
通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。
代码实例：
// scroll the tab header to left
$('#tt').tabs('scroll', 10);
标签页面板（Tab Panel）
标签页面板（tab panel）属性被定义在面板（panel）组件里，下面是一些常用的属性。
标签页面板（tab panel）的 id 属性。
标签页面板（tab panel）的标题文字。
标签页面板（tab panel）的内容。
加载远程内容来填充标签页面板（tab panel）的 URL。
当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。
显示在标签页面板（tab panel）标题上的图标的 CSS class。
标签页面板（tab panel）的宽度。
标签页面板（tab panel）的高度。
collapsible
当设置为 true 时，允许标签页面板（tab panel）可折叠。
一些附加的属性。
当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。
当设置为 true 时，标签页面板（tab panel）将被选中。
记住登录状态
重复输入密码jquery easyui 改变tabs大小时，如何让焦点控制到某一个tab
上 - ITeye问答
//设置tabs大小
function setTabs(){
var clientHeight=document.documentElement.clientH
var clientWidth=document.documentElement.clientW
if($('#sidebar').is(':hidden')){
var leftWidth=$('#split').width()+4;
var leftWidth=$('#sidebar').width()-$('#split').width()+15;
$("#main").tabs({height:clientHeight-98,width:clientWidth-leftWidth});
$('#main').tabs('select','分页设置');
}
当执行这段代码时发现tab的焦点在分页设置的tab停留一下后又回到了默认的第一个tab上，这是什么原因呢，如何把$("#main").tabs({height:clientHeight-98,width:clientWidth-leftWidth});这段代码删掉就没问题
目前还没有答案
已解决问题
未解决问题