jQuery EasyUI รูปแบบวิดเจ็ต - แท็บแท็บ / แท็บ
ปลั๊กอิน jQuery EasyUI โดย $ .fn.tabs.defaults แทนที่ค่าเริ่มต้นเริ่มต้น
แท็บแสดงคอลเลกชันของแผง. มันแสดงเฉพาะแผงแท็บหนึ่งครั้ง. แผงแท็บแต่ละคนมีชื่อส่วนหัวและบางเครื่องมือปุ่มขนาดเล็กรวมทั้งปุ่มปิดและปุ่มที่กำหนดเองอื่น ๆ
วางใจ
- แผงหน้าปัด
- linkbutton
การใช้
สร้างแท็บ (แท็บ)
1. สร้างแท็บโดยการทำเครื่องหมาย (แท็บ)
สร้างแท็บจากแท็ก (แท็บ) ได้ง่ายขึ้นเราไม่จำเป็นต้องเขียนโค้ด JavaScript ใด ๆ อย่าลืมเพิ่มระดับ 'easyui แท็บ' to <div> แท็ก คณะกรรมการแต่ละหน้าป้ายกำกับ (แผงแท็บ) ถูกสร้างขึ้นโดยย่อยแท็ก <div> การใช้งานและแผง (แผง) เดียวกัน
<div id = "TT" class = "easyui แท็บ" style = "width: 500px; ความสูง: 250px;">
<div title = "Tab1" style = "padding: 20px; display: none;">
Tab1
</ div>
<div title = "Tab2" ข้อมูลตัวเลือก = "closable: จริง" style = "ล้น: อัตโนมัติ; padding: 20px; display: none;">
tab2
</ div>
<div title = "TAB3" ข้อมูลตัวเลือก = "iconCls: 'ไอคอนโหลด' closable: จริง" style = "padding: 20px; display: none;">
TAB3
</ div>
</ div>
2 โปรแกรมสร้างแท็บ (แท็บ)
ตอนนี้เราโปรแกรมสร้างแท็บ (แท็บ) เรายังจับเหตุการณ์ 'onSelect'
$ ( '# Tt'). แท็บ ({
ชายแดน: เท็จ
onSelect: ฟังก์ชั่น (ชื่อเรื่อง) {
แจ้งเตือน (ชื่อ + 'ถูกเลือก');
}
});
เพิ่มใหม่จานแท็กหน้า (แผงแท็บ)
เพิ่มแผ่นแท็กหน้าใหม่ (แผงแท็บ) ผ่านเครื่องมือมินิมินิไอคอนเครื่องมือ (8x8) อยู่ด้านหน้าของปุ่มปิด
// เพิ่มแผ่นหน้าแท็บใหม่ (แผงแท็บ)
$ ( '# Tt'). แท็บ ( 'เพิ่ม' {
ชื่อเรื่อง: 'แท็บใหม่'
เนื้อหา: แท็บ 'ร่างกาย'
closable: จริง
เครื่องมือ: [{
iconCls: 'ไอคอนมินิรีเฟรช'
จัดการ: ฟังก์ชั่น () {
แจ้งเตือน ( 'รีเฟรช');
}
}]
});
ได้รับแท็บที่เลือก (แท็บ)
// รับแผ่นหน้าแท็บที่เลือก (แผงแท็บ) และแท็บ (แท็บ) วัตถุ PP var = $ ( '# TT') แท็บ ( 'getSelected') .; แท็บ var = pp.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）被右键点击时触发。 |
ทาง
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回标签页（tabs）选项（options）。 |
| tabs | none | 返回全部的标签页面板（tab panel）。 |
| resize | none | 调整标签页（tabs）容器的尺寸并做布局。 |
| 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.
|
| scrollBy | deltaX | 通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。 代码实例：
// scroll the tab header to left
$('#tt').tabs('scroll', 10);
|
แผ่นหน้าแท็ก (แท็บ Panel)
หน้าคณะกรรมการแท็ก (แผงแท็บ) คุณสมบัติที่กำหนดไว้ในแผง (แผง) องค์ประกอบดังต่อไปนี้คือบางส่วนคุณสมบัติทั่วไป
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| id | string | 标签页面板（tab panel）的 id 属性。 | null |
| title | string | 标签页面板（tab panel）的标题文字。 | |
| content | string | 标签页面板（tab panel）的内容。 | |
| href | string | 加载远程内容来填充标签页面板（tab panel）的 URL。 | null |
| cache | boolean | 当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。 | true |
| iconCls | string | 显示在标签页面板（tab panel）标题上的图标的 CSS class。 | null |
| width | number | 标签页面板（tab panel）的宽度。 | auto |
| height | number | 标签页面板（tab panel）的高度。 | auto |
| collapsible | boolean | 当设置为 true 时，允许标签页面板（tab panel）可折叠。 | false |
บางคุณลักษณะเพิ่มเติม
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| closable | boolean | 当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。 | false |
| selected | boolean | 当设置为 true 时，标签页面板（tab panel）将被选中。 | false |
ปลั๊กอิน jQuery EasyUI