第十章: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 | 选项卡容器宽度,默认值为auto |
height | number | 选项卡容器高度,默认值为auto |
plain | boolean | 设置为true时,将不显示控制面板背景。默认值为:false |
fit | boolean | 设置为true时,选项卡的大小将铺满他所在的容器。默认值为:false |
border | boolean | 设置为true时,显示选项卡容器边框。默认值为:false |
scrollIncrement | number | 选项卡滚动条每次滚动的像素值,默认值为100 |
scrollDuration | number | 每次滚动动画持续的时间, 单位:毫秒。默认值400 |
tools | array,selector | 工具栏添加在选项卡面板头的左侧或者右侧。可用的值有:1.一个菜单工具数据,每一个工具选项都和linkbutton相同。2.一个指向<div/>容器工具菜单的选择器。默认值为null。 |
toolPosition | string | 工具栏位置,可用值:'letf','right',默认值为:right |
tabPosition | string | 选项卡位置,可用值:'top','buttom','left','right'。默认值:top |
headerWidth | number | 选项卡标题宽度,在tabPosition属性设置为'left'或'right'的时候才有效。默认值:150。 |
tabWidth | number | 标签条的宽度,默认值:auto |
tabHight | number | 标签条的高度,默认值:27 |
selected | number | 初始化选中一个tab页。默认值:0 |
showHeader | boolean | 设置为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事件 | ||
---|---|---|
事件名 | 传参 | 说明 |
onLoad | panel | 在ajax选项卡面板加载完远程数据的时候触发。 |
onSelect | title,index | 用户在选择一个选项卡面板的时候触发。 |
onUnselect | title,index | 用户在取消选择一个选项卡面板的时候触发。 |
onBeforeClose | title,index | 在选项卡面板关闭的时候触发,返回false取消关闭操作,下面的例子展示了,在关闭选项卡面板之前以何种方式显示确认对话框。 |
onClose | title,index | 在用户关闭一个选项卡面板的时候触发。 |
onAdd | title,index | 在添加一个新的选项卡面板的时候触发。 |
onUpdate | titlte,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 | 返回选项卡属性 |
tabs | none | 返回所有选项卡面板 |
resize | none | 调整选项卡容器大小和布局 |
add | options | 添加一个新选项卡面板,选项参数是一个配置对象,查看选项卡面板属性的更多细节。在添加一个新的选项卡面板 的时候它将变成可选的。 |
close | which | 关闭一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引。以指定要关闭的面板。 |
getTab | which | 获取指定选项卡面板。'which'参数可以是选项卡面板的标题或者索引。 |
getTabIndex | tab | 获取指定选项卡面板的索引。 |
getSelected | none | 获取选择的选项卡面板。下面的例子展示了如何获取选择的选项卡面板索引。 |
select | which | 选择一个选项卡面板,'which'参数可以是选项卡面板的标题或着索引。 |
unselect | which | 取消选择一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引。 |
showHeader | none | 显示选项卡的标签头。 |
hideHeader | none | 隐藏选项卡的标签头。 |
exists | which | 表名指明的面板是否存在。 |
update | param | 更新指定的选项卡面板,'param'参数包含2个属性:tab:要更新的选项卡面板,options:面板的属性。 |
enableTab | which | 启用指定的选项卡面板,'which'参数可以是选项卡面板的标题或者索引。 |
disadleTab | which | 禁用指定的选项卡面板,'which'参数可以是选项卡面板的标题或者索引。 |
scrollBy | deltaX | 滚动选项卡标题指定的像素数量,负值则向右滚动,正值则向左滚动。 |
<!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一些属性,以下是公共属性。
选项卡面板属性 | ||
---|---|---|
方法名 | 参数 | 说明 |
id | string | 选项卡面板的ID属性,默认值为null |
title | string | 选项卡面板的标题文本。默认值空 |
context | string | 选项卡面板的内容,默认值空 |
href | string | 从URL加载远程数据内容填充到选项卡面板,默认值null |
cache | boolean | 如果为true,在'href'属性设置了有效值的时候缓存选项卡面板,默认值true |
iconCls | string | 定义了一个图标的CSS类ID显示到选项卡面板标题,默认值null |
width | number | 选项卡面板宽度。默认值为auto |
height | number | 选项卡面板高度。默认值为auto |
collapsible | boolean | 如果为true,则允许选项卡折叠,默认值false |
选项卡面板独有属性 | ||
---|---|---|
方法名 | 参数 | 说明 |
closable | boolean | 设置为true时,选项卡面板将显示一个关闭的按钮,在点击的时候会关闭选项卡面板,默认为false。 |
selected | boolean | 设置为true时,选项卡面板会被选中,默认为false。 |
作者:Roger_CoderLife
链接:https://blog.csdn.net/Roger_CoderLife/article/details/102859534
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档,转载请注明原文出处,欢迎转载