jQuery EasyUI Layout-Plugin -Accordion

jQuery EasyUI 插件jQuery EasyUI Plugins

Überschreiben Sie die Standardvorgaben über $.fn.accordion.defaults.

Das Accordion ermöglicht es Ihnen, mehrere Panels bereitzustellen und gleichzeitig eines oder mehrere Panels anzuzeigen. Jedes Panel bietet integrierte Unterstützung für das Erweitern und Reduzieren. Durch Klicken auf einen Panel-Header wird der Panel-Inhalt erweitert oder reduziert. Panel-Inhalte können über ajax geladen werden, indem das Attribut 'href' angegeben wird. Der Benutzer kann das ausgewählte Panel definieren. Wenn nicht angegeben, wird standardmäßig das erste Panel ausgewählt.

Abhängigkeiten

  • panel

Nutzung

Ein Accordion erstellen

Erstellen Sie ein Akkordeon aus Markup, indem Sie die Klasse 'easyui-accordion' zum <div>-Tag hinzufügen.

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

Wir können bestimmte Funktionen ändern, nachdem das Akkordeon geändert oder neu aufgebaut wurde.

$('#aa').accordion({
    animate:false
});

Akkordeon-Panel-Inhalt aktualisieren

Rufen Sie die Methode 'getSelected' auf, um das aktuelle Panel abzurufen; dann können wir die Methode 'refresh' des Panels aufrufen, um neuen Inhalt zu laden.

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
    pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}

Container-Optionen

Name Type Beschreibung Standardwert
width number Die Breite des Akkordeon-Containers. auto
height number Die Höhe des Akkordeon-Containers. auto
fit boolesch Auf true setzen, damit die Größe des Akkordeon-Containers an seinen übergeordneten Container angepasst wird. false
border boolesch Legt fest, ob der Rahmen angezeigt werden soll. wahr
animate boolesch Legt fest, ob Animationseffekte beim Ausklappen oder Einklappen eines Panels angezeigt werden. wahr
multiple boolesch Auf true setzen, damit mehrere Panels gleichzeitig ausgeklappt werden können. Diese Eigenschaft ist seit Version 1.3.5 verfügbar. false
selected number Der Index des anfänglich ausgewählten Panels. Diese Eigenschaft ist seit Version 1.3.5 verfügbar. 0

Panel-Optionen

Die Panel-Optionen des Akkordeons erben vom Panel. Die folgenden sind zusätzliche Eigenschaften:

Name Type Beschreibung Standardwert
selected boolesch Auf true setzen, um das Panel zu erweitern. false
collapsible boolesch Legt fest, ob die Schaltfläche zum Ein-/Ausklappen angezeigt wird. Wenn false, kann das Panel nicht durch Klicken erweitert/eingeklappt werden. wahr

Ereignisse

Name Parameters Beschreibung
onSelect title,index Wird ausgelöst, wenn ein Panel ausgewählt wird.
onUnselect title,index Wird ausgelöst, wenn ein Panel abgewählt wird. Dieses Ereignis ist seit Version 1.3.5 verfügbar.
onAdd title,index Wird ausgelöst, wenn ein neues Panel hinzugefügt wird.
onBeforeRemove title,index Wird ausgelöst, bevor ein Panel entfernt wird. Geben Sie false zurück, um die Entfernung abzubrechen.
onRemove title,index Wird ausgelöst, wenn ein Panel entfernt wird.

Methoden

Name Parameters Beschreibung
options none Gibt die Optionen des Akkordeons zurück.
panels none Ruft alle Panels ab.
resize none Ändert die Größe des Akkordeons.
getSelected none Ruft das erste ausgewählte Panel ab.
getSelections none Ruft alle ausgewählten Panels ab. Diese Methode ist seit Version 1.3.5 verfügbar.
getPanel which Ruft das angegebene Panel ab. Der Parameter 'which' kann der Titel oder Index des Panels sein.
getPanelIndex panel Ruft den Index des angegebenen Panels ab. Diese Methode ist seit Version 1.3 verfügbar.
Das folgende Beispiel zeigt, wie der Index des ausgewählten Panels abgerufen wird.
var p = $('#aa').accordion('getSelected');
if (p){
    var index = $('#aa').accordion('getPanelIndex', p);
    alert(index);
}
select which Wählt das angegebene Panel aus. Der Parameter 'which' kann der Titel oder Index des Panels sein.
unselect which Hebt die Auswahl des angegebenen Panels auf. Der Parameter 'which' kann der Titel oder Index des Panels sein. Diese Methode ist seit Version 1.3.5 verfügbar.
hinzufügen options Fügt ein neues Panel hinzu. Standardmäßig wird das neu hinzugefügte Panel ausgewählt. Um ein neues Panel hinzuzufügen, das nicht ausgewählt ist, übergeben Sie die Eigenschaft 'selected' und setzen Sie sie auf false.
Codebeispiel:
$('#aa').accordion('add', {
    title: 'New Title',
    content: 'New Content',
    selected: false
});
entfernen which Entfernt das angegebene Panel. Der Parameter 'which' kann der Titel oder Index des Panels sein.
jQuery EasyUI 插件jQuery EasyUI Plugins Weitere Erweiterungen