jQuery UI API - 手风琴部件

Kategorie

小部件

Nutzung

描述：将一对标题和内容面板转换为手风琴。

添加版本：1.0

手风琴容器的标记需要一对标题和内容面板。

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

手风琴支持任意标记，但每个内容面板必须是其关联标题的下一个同级元素。参见headerdie Optionen, um zu lernen, wie man eine benutzerdefinierte Markup-Struktur verwendet.

Panels können durch Setzenactiveder Option programmatisch aktiviert werden.

Tastaturinteraktion

Wenn der Fokus auf einem Header liegt, sind die folgenden Tastaturbefehle verfügbar:

  • UP/LEFT - Fokus auf den vorherigen Header verschieben. Wenn auf dem ersten Header, Fokus auf den letzten Header verschieben.
  • DOWN/RIGHT - Fokus auf den nächsten Header verschieben. Wenn auf dem letzten Header, Fokus auf den ersten Header verschieben.
  • HOME - Fokus auf den ersten Header verschieben.
  • END - Fokus auf den letzten Header verschieben.
  • SPACE/ENTER - Das mit dem fokussierten Header verbundene Panel aktivieren.

Wenn der Fokus in einem Panel liegt, sind die folgenden Tastaturbefehle verfügbar:

  • CTRL+UP: Fokus auf den zugeordneten Header verschieben.

主题

Das Accordion-Widget verwendet dasjQuery UI CSS Framework, um das Styling seines Look-and-Feels festzulegen. Wenn Sie akkordeonspezifische Stile verwenden müssen, können Sie die folgenden CSS-Klassennamen verwenden:

  • ui-accordion: Der äußere Container des Accordions.
    • ui-accordion-header: Der Header des Accordions. Wenn der Header enthälticons, hat der Header außerdem eineui-accordion-icons -Klasse.
    • ui-accordion-content: Der Inhaltsbereich des Accordions.

Abhängigkeiten

Zusätzliche Hinweise

  • Dieses Widget benötigt etwas funktionales CSS, andernfalls funktioniert es nicht. Wenn Sie ein benutzerdefiniertes Theme erstellen, verwenden Sie die widgetspezifische CSS-Datei als Ausgangspunkt.

Schnellnavigation

Optionen Methoden Ereignisse

Optionen Type Beschreibung Standardwert
active Boolean oder Integer Welches Panel ist derzeit geöffnet.

Unterstützt mehrere Typen:

  • Boolean: Setzenactiveistfalseum alle Panels einzuklappen. Dies erfordert, dass diecollapsibleOption aktiviert ist.true。
  • Integer: Der nullbasierte Index des zu aktivierenden Panels. Negative Werte wählen Panels aus, die vom letzten Panel aus rückwärts gehen.

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem Angegebenenactiveoption:

$( ".selector" ).accordion({ active: 2 });
    

Nach der Initialisierung abrufen oder festlegenactiveoption:

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );
    
 0
animate Boolean oder Number oder String oder Object Ob und wie Panel-Änderungen animiert werden.

Unterstützt mehrere Typen:

  • Boolean：falsevalue deaktiviert die Animation.
  • Number: die Standarddauer des Easings, in Millisekunden.
  • String: für die Standarddauer derEasingName.
  • Objekt：easingunddurationAnimationseinstellungen mit Eigenschaften.
    • Jede der oben genannten Optionen kanndowneine Eigenschaft enthalten.
    • Wenn das aktivierte Panel einen niedrigeren Index als das aktuell aktive Panel hat, erfolgt eine "Down"-Animation.

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem Angegebenenanimateoption:

$( ".selector" ).accordion({ animate: "bounceslide" });
    

Nach der Initialisierung abrufen oder festlegenanimateoption:

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
    
 {}
collapsible Boolean Ob alle Abschnitte gleichzeitig geschlossen werden können. Erlaubt das Einklappen des aktiven Abschnitts.

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem Angegebenencollapsibleoption:

$( ".selector" ).accordion({ collapsible: true });
    

Nach der Initialisierung abrufen oder festlegencollapsibleoption:

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
    
 false
disabled Boolean Wenn festgelegt auftrue, ist das Akkordeon deaktiviert.

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem Angegebenendisabledoption:

$( ".selector" ).accordion({ disabled: true });
    

Nach der Initialisierung abrufen oder festlegendisabledoption:

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );
    
 false
event String Das Ereignis, auf das die Header des Akkordeons reagieren, um das zugehörige Panel zu aktivieren. Es können mehrere Ereignisse angegeben werden, getrennt durch Leerzeichen.

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem Angegebeneneventoption:

$( ".selector" ).accordion({ event: "mouseover" });
    

Nach der Initialisierung abrufen oder festlegeneventoption:

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
    
 "click"
header Selektor Selektor für das Header-Element, angewendet über .find() auf dem Haupt-Akkordeon-Element. Inhalts-Panels müssen Geschwisterelemente sein, die unmittelbar auf ihre zugehörigen Header folgen.

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem Angegebenenheaderoption:

$( ".selector" ).accordion({ header: "h3" });
    

Nach der Initialisierung abrufen oder festlegenheaderoption:

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );
    
 "> li > :first-child,> :not(li):even"
heightStyle String Steuert die Höhe des Akkordeons und jedes Panels. Mögliche Werte:
  • "auto": Alle Panels werden auf die Höhe des höchsten Panels gesetzt.
  • "fill": Erweitert sich auf die verfügbare Höhe basierend auf der Höhe des übergeordneten Elements des Akkordeons.
  • "content": Die Höhe jedes Panels wird durch seinen Inhalt bestimmt.

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem AngegebenenheightStyleoption:

$( ".selector" ).accordion({ heightStyle: "fill" });
    

Nach der Initialisierung abrufen oder festlegenheightStyleoption:

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );
    
 "auto"
icons Objekt Die für die Header zu verwendenden Icons unddie vom jQuery UI CSS Framework bereitgestellten Icons (Icons)stimmen überein. Setzen Sie auffalsedann werden keine Icons angezeigt.
  • header (string, Standard: "ui-icon-triangle-1-e")
  • activeHeader (string, Standard: "ui-icon-triangle-1-s")

Codebeispiele:

Initialisieren Sie das Akkordeon mit dem Angegebeneniconsoption:

$( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } });
    

Nach der Initialisierung abrufen oder festlegeniconsoption:

// getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
    
 { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

Methoden Gibt zurück Beschreibung
destroy() jQuery (nur Plugin) Entfernt die Akkordeon-Funktionalität vollständig. Dadurch wird das Element in den Zustand vor der Initialisierung zurückversetzt.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die destroy-Methode auf:

$( ".selector" ).accordion( "destroy" );
    
disable() jQuery (nur Plugin) Deaktivieren Sie das Akkordeon.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die disable-Methode auf:

$( ".selector" ).accordion( "disable" );
    
enable() jQuery (nur Plugin) Aktivieren Sie das Akkordeon.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Rufen Sie die enable-Methode auf:

$( ".selector" ).accordion( "enable" );
    
option( optionName ) Objekt Ruft den Wert ab, der aktuell dem angegebenen zugeordnet istoptionNameOption.
  • optionName
    Typ: String
    Beschreibung: Der Name der Option, die abgerufen werden soll.

Codebeispiele:

Methode aufrufen:

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
    
option() PlainObject Ruft ein Objekt ab, das Schlüssel/Wert-Paare enthält, die den aktuellen Akkordeon-Options-Hash darstellen.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiele:

Methode aufrufen:

var options = $( ".selector" ).accordion( "option" );
    
option( optionName, value ) jQuery (nur Plugin) Legt den Wert der Akkordeon-Option fest, die dem angegebenen zugeordnet istoptionNameOption.
  • optionName
    Typ: String
    Beschreibung: Der Name der Option, die festgelegt werden soll.
  • value
    Typ: Object
    Beschreibung: Der Wert, der für die Option festgelegt werden soll.

Codebeispiel:

Rufen Sie diese Methode auf:

$( ".selector" ).accordion( "option", "disabled", true );
    
option( options ) jQuery (nur Plugin) Legt eine oder mehrere Optionen für das Akkordeon fest.
  • options
    Typ: Object
    Beschreibung: Die Options-Wert-Paare, die festgelegt werden sollen.

Codebeispiel:

Rufen Sie diese Methode auf:

$( ".selector" ).accordion( "option", { disabled: true } );
    
refresh() jQuery (nur Plugin) Verarbeitet alle Header und Panels, die direkt im DOM hinzugefügt oder entfernt wurden, und berechnet die Höhe des Akkordeons neu. Das Ergebnis hängt vom Inhalt undheightStyle Optionen.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Rufen Sie die refresh-Methode auf:

$( ".selector" ).accordion( "refresh" );
    
widget() jQuery Gibt ein Akkordeon enthaltendes zurückjQueryObjekt.
  • Diese Methode akzeptiert keine Argumente.

Codebeispiel:

Rufen Sie die widget-Methode auf:

var widget = $( ".selector" ).accordion( "widget" );
    

Ereignisse Type Beschreibung
activate( event, ui ) accordionactivate Wird ausgelöst, nachdem ein Panel aktiviert wurde (nach Abschluss der Animation). Wenn das Akkordeon zuvor eingeklappt war, dannui.oldHeaderundui.oldPanelwird ein leeres jQuery-Objekt sein. Wenn das Akkordeon eingeklappt wird, dannui.newHeaderundui.newPanelwird ein leeres jQuery-Objekt sein.

Hinweis: Da dasactivateEreignis nur ausgelöst werden kann, wenn ein Panel aktiviert wird, wird beim Erstellen des Akkordeon-Widgets das anfängliche Panel dieses Ereignis nicht auslösen. Wenn Sie einen Hook für die Widget-Erstellung benötigen, verwenden Sie dascreateEreignis.

  • event
    Typ: Event
  • ui
    Typ: Object
    • newHeader
      Typ: jQuery
      Beschreibung: Der Header, der gerade aktiviert wurde.
    • oldHeader
      Typ: jQuery
      Beschreibung: Der Header, der gerade deaktiviert wurde.
    • newPanel
      Typ: jQuery
      Beschreibung: Das Panel, das gerade aktiviert wurde.
    • oldPanel
      Typ: jQuery
      Beschreibung: Das Panel, das gerade deaktiviert wurde.

Codebeispiel:

Initialisieren Sie das Accordion mit dem angegebenen activate-Callback:

$( ".selector" ).accordion({
  activate: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das accordionactivate-Ereignis:

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );
    
beforeActivate( event, ui ) accordionbeforeactivate Wird direkt ausgelöst, bevor ein Panel aktiviert wird. Kann abgebrochen werden, um zu verhindern, dass das Panel aktiviert wird. Wenn das Accordion derzeit eingeklappt ist, dannui.oldHeaderundui.oldPanelwird ein leeres jQuery-Objekt sein. Wenn das Akkordeon eingeklappt wird, dannui.newHeaderundui.newPanelwird ein leeres jQuery-Objekt sein.
  • event
    Typ: Event
  • ui
    Typ: Object
    • newHeader
      Typ: jQuery
      Beschreibung: Der zu aktivierende Header.
    • oldHeader
      Typ: jQuery
      Beschreibung: Der zu deaktivierende Header.
    • newPanel
      Typ: jQuery
      Beschreibung: Das zu aktivierende Panel.
    • oldPanel
      Typ: jQuery
      Beschreibung: Das zu deaktivierende Panel.

Codebeispiel:

Initialisieren Sie das Akkordeon mit dem angegebenen beforeActivate-Callback:

$( ".selector" ).accordion({
  beforeActivate: function( event, ui ) {}
});
    

Binden Sie einen Event-Listener an das accordionbeforeactivate-Ereignis:

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );
    
create( event, ui ) accordioncreate Wird ausgelöst, wenn das Akkordeon erstellt wird. Wenn das Akkordeon eingeklappt ist,ui.headerundui.panelwird ein leeres jQuery-Objekt sein.
  • event
    Typ: Event
  • ui
    Typ: Object
    • header
      Typ: jQuery
      Beschreibung: Der aktivierte Header.
    • panel
      Typ: jQuery
      Beschreibung: Das aktivierte Panel.

Codebeispiel:

Initialisieren Sie das Akkordeon mit dem angegebenen create-Callback:

$( ".selector" ).accordion({
  create: function( event, ui ) {}
});
    

Binden Sie einen Ereignis-Listener an das accordioncreate-Ereignis:

$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );
    

Beispiele

Ein einfaches jQuery UI-Accordion.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>折叠面板部件（Accordion Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>部分 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3>部分 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>部分 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

Andere Erweiterungen