L'ajout dynamique et rafraîchissant éléments de l'Accordéon widget jQuery UI

Plusieurs questions ici DONC référence à ce ouvrez l'INTERFACE utilisateur de jQuery demande de fonctionnalité pour la capacité dynamique d'ajouter/supprimer des panneaux à partir du widget Accordéon. Le billet lui-même est marqué (fermé fonction: fixe) et de ce que je peux dire à partir de la les tests unitaires et un pull à partir de leur dépôt Git, il semble être mis en œuvre dans la dernière version.

Cependant, si j'essaie d'ajouter un div comme ils l'ont fait dans l'unité de test ci-dessus:

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

Je ne peux pas le faire fonctionner.

Cependant cette méthode travaux:

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

Mais je ne veux pas de "détruire" l'accordéon, je veux juste ajouter (ou ajouter) un élément et l'actualiser.

À la recherche à la div, j'ai ajouté dans google Chrome, inspecteur montre que l'élément que j'ai ajouté n'a pas le même style CSS ajouté que le reste de l'accordéon:

L'ajout dynamique et rafraîchissant éléments de l'Accordéon widget jQuery UI

après que vous l'ajouter.. comme dans l'exemple dans le lien que vous avez à détruire et réinitialiser l'accordéon pour que cela fonctionne... depuis le nouvellement ajouté des éléments n'étaient pas là au moment de l'accordéon de l'initialisation.
Merci, Jack, vous avez demandé exactement la même question que j'ai à l'esprit lorsque vous tentez de résoudre le même problème. 😉 Et je suis d'accord avec vous -- destruction et de re-création de l'accordéon n'a pas l'air bon.

OriginalL'auteur Jack | 2012-12-13

30

unibasil est vrai que jQuery UI 1.10.0 a mis à jour le actualiser méthode à maintenant permettre ce comportement.

Voici la 1.10.0 changelog remarque à propos de la mise à jour.

La méthode refresh vais maintenant reconnaître les panneaux qui ont été ajoutés ou
supprimé. Cela apporte de l'accordéon en ligne avec des onglets et autres widgets
qui analysent le balisage de trouver les changements.

Installation
```
<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>
```
Javascript
```
$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});
```
Exemple

jsFiddle montrant que vous pouvez ajouter de nouveaux accordéons à la volée sans avoir à détruire l'ancien.

Cela m'a aidé à la bonne mesure dans la mise en œuvre triable/glisser-pignon pour les sections dynamiques.
Dans jsFiddle vous partagé, est-il un moyen pour arrêter 1er onglet/panneau de s'ouvrir après l'ajout de la question de façon dynamique? Chaque fois que nous ajoutons à la question, il provoque le 1er onglet pour l'ouvrir. Je ne veux pas ce comportement. Tous les panneaux doivent être effondrés/état fermé. Toutes les pensées/idées?
C'est vieux, mais pour répondre à @Chetan depuis que j'ai voulu aussi que le comportement, l'utilisation de la active l'option par l'ajout d' .accordéon (les"options", "active", 2) <-- 2 représente l'index de base zéro du panneau pour l'ouvrir

OriginalL'auteur Jerry

Grâce à Jarek!
Dans mon cas, est-il fonctionnel sans enfermant div. La div causes de la création prochaine de l'accordéon.

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});

OriginalL'auteur Plch

1

Question de comportement a été inclus dans l'INTERFACE utilisateur de jQuery 1.10.0 (juste publié) et fonctionne très bien pour moi.

OriginalL'auteur unibasil

Vous devez vous connecter pour publier un commentaire.