JQueryMobile ajoutant des divs pliables dynamiques [duplicate

Question

Duplicata possible:
Ajout dynamiquement des éléments pliants

Je voudrais savoir comment je pourrais ajouter dynamiquement une div pliable, une telle chose peut être faite avec JQM ListViews, appelant Lisview («rafraîchissement») après

Voici le code de test:

http://jsfiddle.net/ca11111/uqwfj/5/

Edit: Dans ci-dessus, il est annexé et rendu, mais plusieurs fois

Edit2: semble fonctionner comme ça?

Answer 1

Que diriez-vous d'omettre le refresh Puisque vous initialisez l'élément (ne pas le rafraîchir):

$('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$('#coll').find('div[data-role=collapsible]').collapsible();  

Voici une version mise à jour de votre jsfiddle: http://jsfiddle.net/uqwfj/7/ (Remarquez que j'ai changé votre setTimeout à un setInterval Pour ajouter en continu de nouveaux éléments au DOM)

Vous pouvez également optimiser cela en enregistrant le nouvel élément dans une variable afin que vous puissiez appeler .collabsible() Sur cet élément:

var $element = $('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$element.collapsible();  

Voici un jsfiddle avec cette optimisation: http://jsfiddle.net/uqwfj/9/

Answer 2

JQM Docs:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

Amélioration de la nouvelle majoration
Le plugin de page envoie un événement PageCreate, que la plupart des widgets utilisent pour se familialiser automatiquement. Tant qu'un script de plugin de widget est référencé, il améliorera automatiquement toutes les instances des widgets qu'il trouve sur la page.

Cependant, si vous générez un nouveau buteur côté client ou chargez-vous dans le contenu via AJAX et injectez-le dans une page, vous pouvez déclencher l'événement de création pour gérer l'auto-initialisation pour tous les plugins contenus dans le nouveau balisage. Cela peut être déclenché sur n'importe quel élément (même la page DIV elle-même), vous enregistrant la tâche d'initialiser manuellement chaque plugin (bouton ListView, SELECT, etc.).

Par exemple, si un bloc de balisage HTML (disons un formulaire de connexion) a été chargé via AJAX, déclenchez l'événement de création pour transformer automatiquement tous les widgets qu'il contient (entrées et boutons dans ce cas) en versions améliorées. Le code de ce scénario serait:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Answer 3

Je ne sais pas si c'est ce que vous voulez, mais si tout ce que vous voulez faire est de pouvoir ajouter dynamiquement des Divs pliants, vous pouvez le faire du côté du code. Par exemple, j'utilise aspx.vb mais si vous utilisez une autre langue, vous pouvez facilement l'adapter à votre situation. Dans votre .aspx (code html), écrivez cette ligne de code où vous souhaitez que votre code HTML dynamique apparaisse.

<asp:Literal ID="CollapseMe" runat="server"></asp:Literal>

Une fois cela fait, cliquez avec le bouton droit sur l'écran et choisissez "Afficher le code"

Ensuite, vous ajoutez ceci

Protected Sub page_load(ByVal Sender As System.Object, ByVal e As System.EventArgs) Handles    MyBase.Load

Dynamic()

End Sub 



Public Sub Dynamic()
    Dim strHtml As New StringBuilder
    Dim strJava As New StringBuilder
    Dim dblNumCollapsibles As New Double

    dblNumCollapsibles = 7

    For i = 1 To dblNumCollapsibles

        strHtml.Append("<div data-role=""collapsible"" data-theme=""c"" data-collapsed=""false"">" _
                                        & "<h3>Title of Collapsible</h3>" _
                                        & "<p data-theme=""a"" style=""white-space: normal;"">" _
                                        & "The text inside of the Collapsible" _
                                        & "</p>" _
                                    & "</div>")


    Next

    Me.CollapseMe.Text = strHtml.ToString

Cela ajoutera dynamiquement 7 barres de liste Div pliables. Vous pouvez modifier cela en changeant "dblnumcollapsless"

Answer 4

Créer un html de div pliable à pliage ajouter dynamiquement à une div et sur cet appel de div .trigger ('créer') $ (div) .trigger ('créer') Cela créera ce div et rend le div pliable