第十章：Tabs（选项卡）组件
学习要点：
加载方式属性列表事件列表方法列表选项卡面板
一、加载方式：
1.class加载方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" class="easyui-tabs" style="width:500px;height:300px;">
<div title="Tab1">tab1</div>
<div title="Tab2">tab2</div>
<div title="Tab3">tab3</div>
</div>
</html>
2.JS调用：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" style="width:500px;height:300px;">
<div title="Tab1">tab1</div>
<div title="Tab2">tab2</div>
<div title="Tab3">tab3</div>
</div>
</html>
$(function(){
$('#box').tabs();
});
二、属性列表：
Tabs属性
属性名值说明width number选项卡容器宽度，默认值为autoheightnumber选项卡容器高度，默认值为autoplainboolean设置为true时，将不显示控制面板背景。默认值为：falsefitboolean设置为true时，选项卡的大小将铺满他所在的容器。默认值为：falseborderboolean设置为true时，显示选项卡容器边框。默认值为：falsescrollIncrementnumber选项卡滚动条每次滚动的像素值，默认值为100scrollDurationnumber每次滚动动画持续的时间， 单位：毫秒。默认值400toolsarray,selector工具栏添加在选项卡面板头的左侧或者右侧。可用的值有：1.一个菜单工具数据，每一个工具选项都和linkbutton相同。2.一个指向<div/>容器工具菜单的选择器。默认值为null。toolPositionstring工具栏位置，可用值：'letf'，'right'，默认值为：righttabPositionstring选项卡位置，可用值：'top','buttom','left','right'。默认值：topheaderWidthnumber选项卡标题宽度，在tabPosition属性设置为'left'或'right'的时候才有效。默认值：150。tabWidthnumber标签条的宽度，默认值：autotabHightnumber标签条的高度，默认值：27selectednumber初始化选中一个tab页。默认值：0showHeaderboolean设置为true时，显示tab页标题，默认值：true
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" style="width:500px;height:300px;">
<div title="Tab1">tab1</div>
<div title="Tab2">tab2</div>
<div title="Tab3">tab3</div>
</div>
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"> </a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
</div>
</html>
$(function(){
$('#box').tabs({
//width:300,
//height:100,
//plain:true,
//fit:true,
//border:false,
//tabWidth:300,
//tabHeight:50,
//scrollIncrement:50,
//scrollDuration:1000,
/*
tools：[{
iconCls:'icon-add',
handler:function(){
alert('add');
},
},{}],
*/
//tools:'#tt',
//toolPosition:'left',
//tabPosition:'left',
//headerWidth:300,
//selected:1,
//showHeader:false,
});
});
三、事件列表：
Tabs事件
事件名传参说明onLoadpanel 在ajax选项卡面板加载完远程数据的时候触发。onSelecttitle,index用户在选择一个选项卡面板的时候触发。onUnselecttitle,index用户在取消选择一个选项卡面板的时候触发。onBeforeClosetitle,index在选项卡面板关闭的时候触发，返回false取消关闭操作，下面的例子展示了，在关闭选项卡面板之前以何种方式显示确认对话框。onClosetitle,index在用户关闭一个选项卡面板的时候触发。onAddtitle,index在添加一个新的选项卡面板的时候触发。onUpdatetitlte,index在更新一个选项卡面板的时候触发。onContextMenu e,tilte,index在右键点击一个选项卡面板的时候触发
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" style="width:500px;height:300px;">
<div title="Tab1">tab1</div>
<div title="Tab2" data-options="colsable:true;">tab2</div>
<div title="Tab3">tab3</div>
</div>
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"> </a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
</div>
</html>
$(function(){
$('#box').tabs({
/*
onSelect:function(title,index){
alert('title' + '|' + 'index');
},
onUnselect:function(title,index){
alert('title' + '|' + 'index');
},
onBeforeClose:function(title,index){
alert('title' + '|' + 'index');
},
onClose:function(title,index){
alert('title' + '|' + 'index');
},
*/
onContentMenu:function(e,title,index){
alert(e.type + '|' + 'title' + '|' + 'index');
},
});
});
四、方法列表：
Tabs方法
方法名传参说明options none返回选项卡属性tabsnone返回所有选项卡面板resizenone调整选项卡容器大小和布局addoptions添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节。在添加一个新的选项卡面板 的时候它将变成可选的。closewhich关闭一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。以指定要关闭的面板。getTabwhich获取指定选项卡面板。'which'参数可以是选项卡面板的标题或者索引。getTabIndextab获取指定选项卡面板的索引。getSelectednone获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。select which选择一个选项卡面板，'which'参数可以是选项卡面板的标题或着索引。unselectwhich取消选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。showHeadernone显示选项卡的标签头。hideHeadernone隐藏选项卡的标签头。existswhich表名指明的面板是否存在。updateparam更新指定的选项卡面板，'param'参数包含2个属性：tab：要更新的选项卡面板，options：面板的属性。enableTabwhich启用指定的选项卡面板，'which'参数可以是选项卡面板的标题或者索引。disadleTabwhich禁用指定的选项卡面板，'which'参数可以是选项卡面板的标题或者索引。scrollBydeltaX滚动选项卡标题指定的像素数量，负值则向右滚动，正值则向左滚动。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div id="box" style="width:500px;height:300px;">
<div title="Tab1">tab1</div>
<div title="Tab2" id="tab2" data-options="colsable:true;">tab2</div>
<div title="Tab3">tab3</div>
</div>
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"></a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
</div>
</html>
$(function(){
$('#box').tabs({
/*
onSelect:function(title,index){
alert('title' + '|' + 'index');
},
onUnselect:function(title,index){
alert('title' + '|' + 'index');
},
onBeforeClose:function(title,index){
alert('title' + '|' + 'index');
},
onClose:function(title,index){
alert('title' + '|' + 'index');
},
onContentMenu:function(e,title,index){
alert(e.type + '|' + 'title' + '|' + 'index');
},
//tabWidth:300,
onAdd:function(title,index){
alert('title' + '|' + 'index');
},
onLoad:function(panel){
alert(panel);
},
*/
onUpdate:function(title,index){
alert('title' + '|' + 'index');
},
//}).css('display','none');
});
//console.log($('#box').tabs('tabs'));
//$(document).click(function(){
// $('#box').tabs().css('display','block');
// $('#box').tabs('resize');
// });
/*
$('box').tabs('add',{
id:'bbbb',
title:'新选项卡',
content:'新模板',
href:'content.xml',
iconCls:'add',
width:1,
height:1,
collapsible:true,
closable:true,
selected:false,
});
*/
//$('#box').tabs('close',1);
//console.log($('#box').tabs('getTab',1));
//console.log($('#box').tabs('getTabIndex',$('#tab2')));
//console.log($('#box').tabs('getSelected'));
//$('#box').tabs('select',1);
//$('#box').tabs('unselect',0);
//$('#box').tabs('hideHeader');
//$('#box').tabs('showHeader');
//console.log($('#box').tabs('exists',1));
$(document).click(function(){
$('#box').tabs('update',{
tab:$('#tab2'),
options:{
title:'修改标题',
},
});
});
//$('#box').tabs('disableTab',1);
//$('#box').tabs('unableTab',1);
//$('#box').tabs('scrollBy',100);
});
//content.xml文件
content
五、选项卡面板：
选项卡面板继承了panel一些属性，以下是公共属性。
选项卡面板属性
方法名参数说明idstring选项卡面板的ID属性，默认值为nulltitlestring选项卡面板的标题文本。默认值空contextstring选项卡面板的内容，默认值空hrefstring从URL加载远程数据内容填充到选项卡面板，默认值nullcacheboolean如果为true，在'href'属性设置了有效值的时候缓存选项卡面板，默认值trueiconClsstring定义了一个图标的CSS类ID显示到选项卡面板标题，默认值nullwidthnumber选项卡面板宽度。默认值为autoheightnumber选项卡面板高度。默认值为autocollapsibleboolean如果为true,则允许选项卡折叠，默认值false
选项卡面板独有属性
方法名参数说明closableboolean设置为true时，选项卡面板将显示一个关闭的按钮，在点击的时候会关闭选项卡面板，默认为false。selectedboolean设置为true时，选项卡面板会被选中，默认为false。
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102859534
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载
