EasyUI之Tabs基本用法 原
依赖
- panel
- linkbutton
创建标签页（Tabs）
1、通过标记创建标签页（Tabs）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
</head>
<body>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:10px;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="padding:10px;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:10px;">
tab3
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tt").tabs({
selected:2,
// onBeforeClose:function(title){
// return confirm("are you sure you want to close" + title)
// }
onBeforeClose:function(title,index){
var target = this;
$.messager.confirm("Confirm","Are you sure your want to close" + title,function(r){
if(r){
var opts = $(target).tabs("options");
var bc = opts.onBeforeClose;
opts.onBeforeClose = function(){};
$(target).tabs("close",index);
opts.onBeforeClose = bc;
}
});
return false;
}
})
});
//设置默认选项卡可以在div的 data-options="closable:true,selected:true" 或者js设置
</script>
</body>
</html>2、编程创建标签页（Tabs）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI Demo</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/material/easyui.css">
<link rel="stylesheet" type="text/css" href="../../plugins/easyUI/themes/icon.css">
<!-- <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css"> -->
</head>
<body style="padding:15px;">
<div id="tt" style="">
</div>
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="../../plugins/easyUI/jquery.easyui.min.js"></script>
<script>
var height = $(window).height()-30;
//现在我们编程创建标签页（Tabs），我们同时捕捉 'onSelect' 事件。
$("#tt").tabs({
border: true,
//width:"100%",不设置100% 默认也是100%
height:height,
selected:1,
//fit:true,设置后效果不好
onSelect: function(title) {
console.log(title + ' is selected');
}
})
//添加新的标签页面板（tab panel）
$('#tt').tabs('add', {
title: 'New Tab',
content: 'Tab Body',
closable: true,
tools: [{
iconCls: 'icon-mini-refresh',
handler: function() {
alert('refresh');
}
}]
});
$('#tt').tabs('add', {
title: 'Next Tab',
content: 'next Tab Body',
closable: true,
});
</script>
</body>
</html>标签页方法
名称 | 参数 | 描述 |
|---|---|---|
options | none | 返回标签页（tabs）选项（options）。 |
tabs | none | 返回全部的标签页面板（tab panel）。 |
resize | none | 调整标签页（tabs）容器的尺寸并做布局。 setTimeout(function(){$('#tt').tabs('resize', { width: '100%' })},400) |
add | options | 添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。 当添加一个新的标签页面板（tab panel）时，它将被选中。 如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。 // add a unselected tab panel $('#tt').tabs('add',{ title: 'new tab', selected: false //... }); |
close | which | 关闭一个标签页面板（tab panel），'which' 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。 |
getTab | which | 获取指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。 |
getTabIndex | tab | 获取指定的标签页面板（tab panel）索引。 |
getSelected | none | 获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。 var tab = $('#tt').tabs('getSelected'); var index = $('#tt').tabs('getTabIndex',tab); alert(index); |
select | which | 选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。 |
unselect | which | 选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。 |
showHeader | none | 显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。 |
hideHeader | none | 隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。 |
exists | which | 指示指定的面板是否已存在，'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。 |
update | param | 更新指定的标签页面板（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'); |
enableTab | which | 启用指定的标签页面板（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 | which | 禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。 代码实例： $('#tt').tabs('disableTab', 1); // disable the second tab panel. |
标签页属性
width | number | 标签页（Tabs）容器的宽度。 | auto |
|---|---|---|---|
height | number | 标签页（Tabs）容器的高度。 | auto |
plain | boolean | 当设置为 true 时，就不用背景容器图片来呈现 tab 条。 | false |
fit | boolean | 当设置为 true 时，就设置标签页（Tabs）容器的尺寸以适应它的父容器。 | false |
border | boolean | 当设置为 true 时，就显示标签页（Tabs）容器边框。 | true |
scrollIncrement | number | 每按一次 tab 滚动按钮，滚动的像素数。 | 100 |
scrollDuration | number | 每一个滚动动画应该持续的毫秒数。 | 400 |
tools | 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> </div> | null |
toolPosition | string | 工具栏位置。可能的值：'left'、'right'。该属性自版本 1.3.2 起可用。 | right |
tabPosition | string | 标签页（tab）位置。可能的值：'top'、'bottom'、'left'、'right'。该属性自版本 1.3.2 起可用。 | top |
headerWidth | number | 标签页（tab）头部宽度，只有当 tabPosition 设置为 'left' 或 'right' 时才有效。该属性自版本 1.3.2 起可用。 | 150 |
tabWidth | number | tab 条的宽度。该属性自版本 1.3.4 起可用。 | auto |
tabHeight | number | tab 条的高度。该属性自版本 1.3.4 起可用。 | 27 |
selected | number | 初始化选定的标签页索引。该属性自版本 1.3.5 起可用。 | 0 |
showHeader | boolean | 当设置为 true 时，显示标签页（tab）头部。该属性自版本 1.3.5 起可用。 | true |
标签页事件
名称 | 参数 | 描述 |
|---|---|---|
onLoad | panel | 当一个 ajax 标签页面板（tab panel）完成加载远程数据时触发。 |
onSelect | 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 = this; $.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){ if (r){ var opts = $(target).tabs('options'); var bc = opts.onBeforeClose; opts.onBeforeClose = function(){}; // allowed to close now $(target).tabs('close',index); opts.onBeforeClose = bc; // restore the event function } }); return false; // prevent from closing } }); |
onClose | title,index | 当用户关闭一个标签页面板（tab panel）时触发。 |
onAdd | title,index | 当一个新的标签页面板（tab panel）被添加时触发。 |
onUpdate | title,index | 当一个标签页面板（tab panel）被更新时触发。 |
onContextMenu | e, title,index | 当一个标签页面板（tab panel）被右键点击时触发。 |
(adsbygoogle = window.adsbygoogle || []).push({});