jQuery EasyUI Layout Plugin -Tabs
jQuery EasyUI Plugin
Überschreiben Sie die Standardvorgaben über $.fn.tabs.defaults.
Die Tabs zeigen eine Sammlung von Panels an. Es wird immer nur ein Tab-Panel gleichzeitig angezeigt. Jedes Tab-Panel hat den Kopfzeilentitel und einige Mini-Schaltflächen-Tools, einschließlich Schließen-Schaltfläche und anderer benutzerdefinierter Schaltflächen.
Abhängigkeiten
- panel
- linkbutton
Nutzung
Tabs erstellen
1. Tabs über Markup erstellen
Das Erstellen von Tabs aus Markup ist einfacher, wir müssen keinen JavaScript-Code schreiben. Denken Sie daran, die Klasse 'easyui-tabs' zum <div>-Markup hinzuzufügen. Jedes Tab-Panel wird über ein untergeordnetes <div>-Markup erstellt, und seine Verwendung ist dieselbe wie beim Panel.
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
2. Tabs programmatisch erstellen
Jetzt erstellen wir Tabs programmatisch und erfassen außerdem das 'onSelect'-Ereignis.
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
Ein neues Tab-Panel hinzufügen
Ein neues Tab-Panel über ein Mini-Tool hinzufügen; das Mini-Tool-Symbol (8x8) wird vor der Schließen-Schaltfläche platziert.
// 添加一个新的标签页面板(tab panel)
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
Den ausgewählten Tab abrufen
// 获取选中的标签页面板(tab panel)和它的标签页(tab)对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页(tab)对象
Eigenschaften
| Name | Type | Beschreibung | Standard |
|---|---|---|---|
| width | number | Die Breite des Tabs-Containers. | auto |
| height | number | Die Höhe des Tabs-Containers. | auto |
| plain | boolesch | Wenn auf true gesetzt, wird kein Hintergrundbild des Containers verwendet, um die Tab-Leiste zu rendern. | false |
| fit | boolesch | Wenn auf true gesetzt, wird die Größe des Tabs-Containers an den übergeordneten Container angepasst. | false |
| border | boolesch | Wenn auf true gesetzt, wird der Rahmen des Tabs-Containers angezeigt. | wahr |
| scrollIncrement | number | Die Anzahl der Pixel, um die bei jedem Drücken einer Tab-Scroll-Schaltfläche gescrollt wird. | 100 |
| scrollDuration | number | Die Anzahl der Millisekunden, die jede Scroll-Animation dauern soll. | 400 |
| tools | array,selector | Eine Symbolleiste, die auf der linken oder rechten Seite des Headers platziert wird. Mögliche Werte: 1. Ein Array, das eine Gruppe von Werkzeugen angibt; jede Werkzeugoption entspricht einem Link-Button (Linkbutton). 2. Ein Selektor, der ein <div> angibt, das die Werkzeuge enthält. Codebeispiele: Werkzeuge über ein Array definieren.
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
Werkzeuge über einen vorhandenen DOM-Container definieren.
$('#tt').tabs({
tools:'#tab-tools'
});
<div id="tab-tools">
<a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
<a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
|
null |
| toolPosition | string | Position der Symbolleiste. Mögliche Werte: 'left', 'right'. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. | right |
| tabPosition | string | Tab-Position. Mögliche Werte: 'top', 'bottom', 'left', 'right'. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. | top |
| headerWidth | number | Breite des Tab-Headers. Sie ist nur gültig, wenn tabPosition auf 'left' oder 'right' gesetzt ist. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. | 150 |
| tabWidth | number | Breite der Tab-Leiste. Diese Eigenschaft ist seit Version 1.3.4 verfügbar. | auto |
| tabHeight | number | Höhe der Tab-Leiste. Diese Eigenschaft ist seit Version 1.3.4 verfügbar. | 27 |
| selected | number | Der Index des anfänglich ausgewählten Tabs. Diese Eigenschaft ist seit Version 1.3.5 verfügbar. | 0 |
| showHeader | boolesch | Wenn auf true gesetzt, wird der Tab-Header angezeigt. Diese Eigenschaft ist seit Version 1.3.5 verfügbar. | wahr |
Ereignisse
| Name | Parameters | Beschreibung |
|---|---|---|
| onLoad | panel | Wird ausgelöst, wenn ein Ajax-Tab-Panel das Laden von Remote-Daten abgeschlossen hat. |
| onSelect | title,index | Wird ausgelöst, wenn der Benutzer ein Tab-Panel auswählt. |
| onUnselect | title,index | Wird ausgelöst, wenn der Benutzer die Auswahl eines Tab-Panels aufhebt. Dieses Ereignis ist seit Version 1.3.5 verfügbar. |
| onBeforeClose | title,index | Wird ausgelöst, bevor ein Tab-Panel geschlossen wird. Geben Sie false zurück, um den Schließvorgang abzubrechen. Das folgende Beispiel veranschaulicht, wie vor dem Schließen eines Tab-Panels ein Bestätigungsdialog angezeigt wird.
$('#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 | Wird ausgelöst, wenn der Benutzer ein Tab-Panel schließt. |
| onAdd | title,index | Wird ausgelöst, wenn ein neues Tab-Panel hinzugefügt wird. |
| onUpdate | title,index | Wird ausgelöst, wenn ein Tab-Panel aktualisiert wird. |
| onContextMenu | e, title,index | Wird ausgelöst, wenn ein Tab-Panel mit der rechten Maustaste angeklickt wird. |
Methoden
| Name | Parameters | Beschreibung |
|---|---|---|
| options | none | Gibt die Tabs-Optionen zurück. |
| tabs | none | Gibt alle Tab-Panels zurück. |
| resize | none | Passt die Größe des Tabs-Containers an und führt das Layout aus. |
| hinzufügen | options | Fügt ein neues Tab-Panel hinzu. Der Parameter options ist ein Konfigurationsobjekt. Weitere Details finden Sie in den Eigenschaften des Tab-Panels. Wenn ein neues Tab-Panel hinzugefügt wird, wird es ausgewählt. Wenn Sie ein nicht ausgewähltes Tab-Panel hinzufügen möchten, denken Sie daran, die Eigenschaft 'selected' auf false zu setzen.
// add a unselected tab panel
$('#tt').tabs('add',{
title: 'new tab',
selected: false
//...
});
|
| close | which | Schließt ein Tab-Panel. Der Parameter 'which' kann der Titel oder Index des zu schließenden Tab-Panels sein. |
| getTab | which | Gibt das angegebene Tab-Panel zurück. Der Parameter 'which' kann der Titel oder Index des Tab-Panels sein. |
| getTabIndex | tab | Gibt den Index des angegebenen Tab-Panels zurück. |
| getSelected | none | Gibt das ausgewählte Tab-Panel zurück. Das folgende Beispiel zeigt, wie man den Index des ausgewählten Tab-Panels abruft.
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
|
| select | which | Wählt ein Tab-Panel aus. Der Parameter 'which' kann der Titel oder Index des Tab-Panels sein. |
| unselect | which | Wählt ein Tab-Panel aus. Der Parameter 'which' kann der Titel oder Index des Tab-Panels sein. Diese Methode ist seit Version 1.3.5 verfügbar. |
| showHeader | none | Zeigt den Tab-Header an. Diese Methode ist seit Version 1.3.5 verfügbar. |
| hideHeader | none | Blendet den Tab-Header aus. Diese Methode ist seit Version 1.3.5 verfügbar. |
| existiert | which | Gibt an, ob das angegebene Panel bereits vorhanden ist. Der Parameter 'which' kann der Titel oder Index des Tab-Panels sein. |
| update | param | Aktualisiert das angegebene Tab-Panel. Der Parameter param enthält zwei Eigenschaften: tab: das zu aktualisierende Tab-Panel. options: die Optionen des Panels. Codebeispiel:
// 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 | Aktiviert das angegebene Tab-Panel. Der Parameter 'which' kann der Titel oder Index des Tab-Panels sein. Diese Methode ist seit Version 1.3 verfügbar. Codebeispiel:
$('#tt').tabs('enableTab', 1); // enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title
|
| disableTab | which | Deaktiviert das angegebene Tab-Panel. Der Parameter 'which' kann der Titel oder Index des Tab-Panels sein. Diese Methode ist seit Version 1.3 verfügbar. Codebeispiel:
$('#tt').tabs('disableTab', 1); // disable the second tab panel.
|
| scrollBy | deltaX | Scrollt den Tab-Header um die angegebene Anzahl von Pixeln. Ein negativer Wert scrollt nach rechts, ein positiver Wert scrollt nach links. Diese Methode ist seit Version 1.3.2 verfügbar. Codebeispiel:
// scroll the tab header to left
$('#tt').tabs('scroll', 10);
|
Tab-Panel
Tab-Panel-Eigenschaften werden in der Panel-Komponente definiert. Die folgenden sind einige häufig verwendete Eigenschaften.
| Name | Type | Beschreibung | Standard |
|---|---|---|---|
| id | string | Die id-Eigenschaft des Tab-Panels. | null |
| title | string | Der Titeltext des Tab-Panels. | |
| content | string | Der Inhalt des Tab-Panels. | |
| href | string | Eine URL zum Laden von Remote-Inhalten, um das Tab-Panel zu befüllen. | null |
| cache | boolesch | Wenn auf true gesetzt, wird das Tab-Panel zwischengespeichert, wenn ein gültiges href-Attribut festgelegt ist. | wahr |
| iconCls | string | Die CSS-Klasse des Symbols, das im Titel des Tab-Panels angezeigt wird. | null |
| width | number | Die Breite des Tab-Panels. | auto |
| height | number | Die Höhe des Tab-Panels. | auto |
| collapsible | boolesch | Wenn auf true gesetzt, ist das Tab-Panel einklappbar. | false |
Einige zusätzliche Attribute.
| Name | Type | Beschreibung | Standardwert |
|---|---|---|---|
| closable | boolesch | Wenn auf true gesetzt, zeigt das Tab-Panel eine Schließen-Schaltfläche an; durch Klicken darauf kann das Tab-Panel geschlossen werden. | false |
| selected | boolesch | Wenn auf true gesetzt, wird das Tab-Panel ausgewählt. | false |
jQuery EasyUI Plugin Andere Erweiterungen