jQuery UI API - Widget Accordéon

Catégorie

Widgets

Utilisation

Description :Transformez une paire d'en-têtes et de panneaux de contenu en accordéon.

Version ajoutée :1.0

Le balisage du conteneur de l'accordéon nécessite une paire d'en-têtes et de panneaux de contenu.

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

L'accordéon prend en charge un balisage arbitraire, mais chaque panneau de contenu doit être le frère suivant de son en-tête associé. Voirheaderles options pour apprendre à utiliser une structure de balisage personnalisée.

Les panneaux peuvent, en définissantactivel'option, être activés par programmation.

Interaction au clavier

Lorsque le focus est sur un en-tête, les commandes clavier suivantes sont disponibles :

  • HAUT/GAUCHE - Déplace le focus vers l'en-tête précédent. Si le focus est sur le premier en-tête, déplacez le focus vers le dernier en-tête.
  • BAS/DROITE - Déplace le focus vers l'en-tête suivant. Si le focus est sur le dernier en-tête, déplacez le focus vers le premier en-tête.
  • DÉBUT - Déplace le focus vers le premier en-tête.
  • FIN - Déplace le focus vers le dernier en-tête.
  • ESPACE/ENTRÉE - Active le panneau associé à l'en-tête ayant le focus.

Lorsque le focus est dans un panneau, les commandes clavier suivantes sont disponibles :

  • CTRL+HAUT : Déplace le focus vers l'en-tête associé.

Thèmes

Le widget Accordion utilise lejQuery UI CSS Frameworkpour définir le style de son apparence et de son comportement. Si vous devez utiliser des styles spécifiques à l'accordéon, vous pouvez utiliser les noms de classes CSS suivants :

  • ui-accordion: Le conteneur extérieur de l'accordéon.
    • ui-accordion-header: L'en-tête de l'accordéon. Si l'en-tête contienticons, l'en-tête aura également uneui-accordion-icons classe.
    • ui-accordion-content: Le panneau de contenu de l'accordéon.

Dépendances

Notes supplémentaires

  • Ce widget nécessite du CSS fonctionnel, sinon il ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS spécifique au widget comme point de départ.

Navigation rapide

Options Méthodes Événements

Options Type Description Valeur par défaut
active Booléen ou Entier Quel panneau est actuellement ouvert.

Prend en charge plusieurs types :

  • Booléen: Définiractiveestfalsepour réduire tous les panneaux. Cela nécessite que l'collapsibleoption soittrue。
  • Entier: L'index de base zéro du panneau à activer. Les valeurs négatives sélectionnent les panneaux en remontant depuis le dernier panneau.

Exemples de code :

Initialiser l'accordéon avec les options spécifiéesactiveoption:

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

Après l'initialisation, obtenir ou définir l'activeoption:

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );
    
 0
animer Boolean ou Number ou String ou Object Indique si et comment animer les changements de panneau.

Prend en charge plusieurs types :

  • Boolean：falsevaleur désactivera l'animation.
  • Number: la durée par défaut de l'easing, en millisecondes.
  • String: pour la durée par défaut, le nom de l'easing.
  • Object：easingetdurationParamètres d'animation avec des propriétés.
    • Chacune des options ci-dessus peut contenirdownune propriété.
    • Lorsque le panneau en cours d'activation a un index inférieur à celui du panneau actuellement actif, une animation « Down » se produit.

Exemples de code :

Initialiser l'accordéon avec les options spécifiéesanimateoption:

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

Après l'initialisation, obtenir ou définir l'animateoption:

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
    
 {}
collapsible Boolean Indique si toutes les sections peuvent être fermées en même temps. Permet de replier la section active.

Exemples de code :

Initialiser l'accordéon avec les options spécifiéescollapsibleoption:

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

Après l'initialisation, obtenir ou définir l'collapsibleoption:

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
    
 false
disabled Boolean Si défini surtrue, l'accordéon est désactivé.

Exemples de code :

Initialiser l'accordéon avec les options spécifiéesdisabledoption:

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

Après l'initialisation, obtenir ou définir l'disabledoption:

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );
    
 false
event String L'événement auquel les en-têtes de l'accordéon réagiront afin d'activer le panneau associé. Plusieurs événements peuvent être spécifiés, séparés par des espaces.

Exemples de code :

Initialiser l'accordéon avec les options spécifiéeseventoption:

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

Après l'initialisation, obtenir ou définir l'eventoption:

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
    
 "click"
header Sélecteur Sélecteur pour l'élément d'en-tête, appliqué via .find() sur l'élément principal de l'accordéon. Les panneaux de contenu doivent être des éléments frères qui suivent immédiatement leurs en-têtes associés.

Exemples de code :

Initialiser l'accordéon avec les options spécifiéesheaderoption:

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

Après l'initialisation, obtenir ou définir l'headeroption:

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );
    
 "> li > :first-child,> :not(li):even"
heightStyle String Contrôle la hauteur de l'accordéon et de chaque panneau. Valeurs possibles :
  • "auto": Tous les panneaux seront définis à la hauteur du panneau le plus haut.
  • "fill": S'étend à la hauteur disponible en fonction de la hauteur de l'élément parent de l'accordéon.
  • "content": La hauteur de chaque panneau est déterminée par son contenu.

Exemples de code :

Initialiser l'accordéon avec les options spécifiéesheightStyleoption:

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

Après l'initialisation, obtenir ou définir l'heightStyleoption:

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );
    
 "auto"
icônes Object Les icônes à utiliser pour les en-têtes, etles icônes (Icons) fournies par le jQuery UI CSS Frameworkcorrespondent. Défini àfalsealors aucune icône n'est affichée.
  • header (chaîne, par défaut : "ui-icon-triangle-1-e")
  • activeHeader (chaîne, par défaut : "ui-icon-triangle-1-s")

Exemples de code :

Initialiser l'accordéon avec les options spécifiéesiconsoption:

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

Après l'initialisation, obtenir ou définir l'iconsoption:

// 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" }

Méthodes Renvoie Description
destroy() jQuery (plugin uniquement) Supprimer complètement la fonctionnalité d'accordéon. Cela ramènera l'élément à son état précédant l'initialisation.
  • Cette méthode n'accepte aucun argument.

Exemples de code :

Invoquer la méthode destroy :

$( ".selector" ).accordion( "destroy" );
    
disable() jQuery (plugin uniquement) Désactiver l'accordéon.
  • Cette méthode n'accepte aucun argument.

Exemples de code :

Invoquer la méthode disable :

$( ".selector" ).accordion( "disable" );
    
enable() jQuery (plugin uniquement) Activer l'accordéon.
  • Cette méthode n'accepte aucun argument.

Exemples de code :

Invoquer la méthode enable :

$( ".selector" ).accordion( "enable" );
    
option( optionName ) Object Obtient la valeur actuellement associée au nom d'option spécifiéoptionNameoption.
  • optionName
    Type : String
    Description : Le nom de l'option à obtenir.

Exemples de code :

Invoquez la méthode :

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
    
option() PlainObject Obtient un objet contenant des paires clé/valeur qui représentent le hash actuel des options de l'accordéon.
  • Cette méthode n'accepte aucun argument.

Exemples de code :

Invoquez la méthode :

var options = $( ".selector" ).accordion( "option" );
    
option( optionName, value ) jQuery (plugin uniquement) Définit la valeur de l'option d'accordéon associée au nom d'option spécifiéoptionNameoption.
  • optionName
    Type : String
    Description : Le nom de l'option à définir.
  • value
    Type : Object
    Description : La valeur à définir pour l'option.

Exemple de code :

Appelez cette méthode :

$( ".selector" ).accordion( "option", "disabled", true );
    
option( options ) jQuery (plugin uniquement) Définit une ou plusieurs options pour l'accordéon.
  • options
    Type : Object
    Description : Les paires option-valeur à définir.

Exemple de code :

Appelez cette méthode :

$( ".selector" ).accordion( "option", { disabled: true } );
    
refresh() jQuery (plugin uniquement) Traite tous les en-têtes et panneaux directement ajoutés ou supprimés dans le DOM, et recalcule la hauteur de l'accordéon. Le résultat dépend du contenu etheightStyle options.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appelez la méthode refresh :

$( ".selector" ).accordion( "refresh" );
    
widget() jQuery Renvoie un élément contenant l'accordéonjQueryobjet.
  • Cette méthode n'accepte aucun argument.

Exemple de code :

Appelez la méthode widget :

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

Événements Type Description
activate( event, ui ) accordionactivate Déclenché après l'activation d'un panneau (une fois l'animation terminée). Si l'accordéon était précédemment replié, alorsui.oldHeaderetui.oldPanelsera un objet jQuery vide. Si l'accordéon est en train de se replier, alorsui.newHeaderetui.newPanelsera un objet jQuery vide.

Remarque : Étant donné que l'activateévénement ne peut être déclenché que lorsqu'un panneau est activé, lors de la création du widget accordéon, le panneau initial ne déclenchera pas cet événement. Si vous avez besoin d'un hook pour la création du widget, utilisez l'createévénement.

  • event
    Type : Event
  • ui
    Type : Object
    • newHeader
      Type : jQuery
      Description : L'en-tête qui vient d'être activé.
    • oldHeader
      Type : jQuery
      Description : L'en-tête qui vient d'être désactivé.
    • newPanel
      Type : jQuery
      Description : Le panneau qui vient d'être activé.
    • oldPanel
      Type : jQuery
      Description : Le panneau qui vient d'être désactivé.

Exemple de code :

Initialiser l'accordéon avec le callback activate spécifié :

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

Lier un écouteur d'événement à l'événement accordionactivate :

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );
    
beforeActivate( event, ui ) accordionbeforeactivate Déclenché directement avant qu'un panneau ne soit activé. Peut être annulé pour empêcher l'activation du panneau. Si l'accordéon est actuellement replié, alorsui.oldHeaderetui.oldPanelsera un objet jQuery vide. Si l'accordéon est en train de se replier, alorsui.newHeaderetui.newPanelsera un objet jQuery vide.
  • event
    Type : Event
  • ui
    Type : Object
    • newHeader
      Type : jQuery
      Description : L'en-tête à activer.
    • oldHeader
      Type : jQuery
      Description : L'en-tête à désactiver.
    • newPanel
      Type : jQuery
      Description : Le panneau à activer.
    • oldPanel
      Type : jQuery
      Description : Le panneau à désactiver.

Exemple de code :

Initialiser l'accordéon avec le callback beforeActivate spécifié :

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

Lier un écouteur d'événement à l'événement accordionbeforeactivate :

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );
    
create( event, ui ) accordioncreate Déclenché lorsque l'accordéon est créé. Si l'accordéon est replié,ui.headeretui.panelsera un objet jQuery vide.
  • event
    Type : Event
  • ui
    Type : Object
    • header
      Type : jQuery
      Description : L'en-tête activé.
    • panel
      Type : jQuery
      Description : Le panneau activé.

Exemple de code :

Initialiser l'accordéon avec le callback create spécifié :

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

Lier un écouteur d'événement à l'événement accordioncreate :

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

Exemples

Un accordéon jQuery UI simple.

<!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>

Autres extensions