Jquerymobile aggiunge div dinamici pieghevoli [duplicato]

Question

Possibile duplicato:
Aggiunta dinamica di elementi pieghevoli

Vorrei sapere come potrei aggiungere dinamicamente un div pieghevole, una cosa del genere può essere fatta con listview Jqm, chiamando lisview('refresh') dopo

ecco il codice di test:

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

modificare:in alto, è aggiunto e visualizzato, ma più volte

modifica2:sembra funzionare così?

Answer 1

Che ne dici di omettere refresh poiché stai inizializzando l'elemento (senza aggiornarlo):

$('<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();  

Ecco una versione aggiornata del tuo JSFiddle: http://jsfiddle.net/UQWFJ/7/ (Notare che ho cambiato il tuo setTimeout in un setInterval per aggiungere continuamente nuovi elementi al DOM)

Inoltre puoi ottimizzarlo salvando il nuovo elemento in una variabile in modo da poter chiamare .collabsible() solo su quell'elemento:

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

$element.collapsible();  

Ecco un JSFiddle con questa ottimizzazione: http://jsfiddle.net/UQWFJ/9/

Answer 2

Documenti jQM:

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

Miglioramento del nuovo markup
Il plugin della pagina invia un evento pagecreate, che la maggior parte dei widget utilizza per auto-inizializzarsi.Finché viene referenziato uno script di plug -in widget, migliorerà automaticamente qualsiasi istanza dei widget che trova nella pagina.

Tuttavia, se si genera un nuovo markup sul lato client o si carica nel contenuto tramite Ajax e lo inietta in una pagina, è possibile attivare l'evento Crea per gestire l'auto-inizializzazione per tutti i plugin contenuti nel nuovo markup.Questo può essere attivato su qualsiasi elemento (anche la pagina stessa della pagina), salvando il compito di inizializzare manualmente ciascun plug -in (pulsante ListView, Select, ecc.).

Ad esempio, se un blocco di markup HTML (dire un modulo di accesso) è stato caricato tramite AJAX, attivare l'evento Crea per trasformare automaticamente tutti i widget che contiene (input e pulsanti in questo caso) nelle versioni migliorate.Il codice per questo scenario sarebbe:

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

Answer 3

Non sono sicuro che sia quello che vuoi, ma se tutto ciò che vuoi fare è essere in grado di aggiungere dinamicamente div comprimibili, puoi farlo sul lato codice.Ad esempio, io uso aspx.vb ma se usi un linguaggio diverso da quello puoi adattarlo facilmente alla tua situazione.Nel tuo .aspx (codice html) scrivi questa riga di codice nel punto in cui desideri che appaia il tuo codice html dinamico.

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

Fatto ciò, fai clic con il pulsante destro del mouse sullo schermo e scegli "visualizza codice"

Quindi aggiungi questo

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

Questo aggiungerà dinamicamente 7 listbar div comprimibili.Puoi modificarlo cambiando "dblNumCollapsibles"

Answer 4

crea html di div pieghevole aggiungi dinamicamente ad alcuni div e su quella chiamata div .trigger ('crea') $ (div) .trigger ('create') questo creerà quel div e renderà il div comprimibile