jQuery EasyUI Layout Plugin -Tabs


jQuery EasyUI 插件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 插件jQuery EasyUI Plugin Andere Erweiterungen