Jquerymobile agrega divs plegables dinámicos [duplicado]

Question

Posible duplicado:
Agregar dinámicamente elementos plegables

Me gustaría saber cómo podría agregar dinámicamente un div plegable, algo así se puede hacer con Jqm listviews, llamando a lisview('refresh') después

aquí está el código de prueba:

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

editar:arriba, se agrega y se representa, pero varias veces

editar2:¿Parece funcionar así?

Answer 1

¿Qué tal si omitimos el refresh ya que está inicializando el elemento (no actualizándolo):

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

Aquí hay una versión actualizada de su JSFiddle: http://jsfiddle.net/UQWFJ/7/ (Observa que cambié tu setTimeout a un setInterval para agregar continuamente nuevos elementos al DOM)

También puede optimizar esto guardando el nuevo elemento en una variable para poder llamar .collabsible() solo en ese elemento:

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

$element.collapsible();  

Aquí hay un JSFiddle con esta optimización: http://jsfiddle.net/UQWFJ/9/

Answer 2

Documentos de jQM:

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

Mejora de marcado nuevo
El complemento de página envía un evento de creación de página, que la mayoría de los widgets utilizan para autoinicializarse. Mientras tanto a medida que se hace referencia a un script de complemento de widget, se mejorará automáticamente cualquier instancia de los widgets que encuentre en la página.

Sin embargo, si genera un nuevo marcado en el lado del cliente o carga contenido a través de Ajax e inyectarlo en una página, puede activar el evento de creación para manejar la inicialización automática de todos los complementos contenidos en el nuevo marcado. Esto se puede activar en cualquier elemento (incluso la página div en sí), lo que le ahorra la tarea de inicializar manualmente cada complemento (botón de vista de lista, seleccionar, etc.).

Por ejemplo, si se cargó un bloque de marcado HTML (por ejemplo, un formulario de inicio de sesión) a través de Ajax, active el evento de creación para transformar automáticamente todos los widgets que contiene (entradas y botones en este caso) en el versiones mejoradas. El código para este escenario sería:

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

Answer 3

No estoy seguro de si esto es lo que quiere, pero si todo lo que quiere hacer es poder agregar divs plegables de forma dinámica, puede hacerlo en el lado del código.Por ejemplo, uso aspx.vb, pero si usa algún otro idioma, puede adaptarlo fácilmente a su situación.En su .aspx (código html) escriba esta línea de código donde desea que aparezca su código html dinámico.

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

Una vez hecho esto, haga clic derecho en la pantalla y elija "ver código"

Luego agrega esto

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

Esto agregará dinámicamente 7 barras de lista de div contraíbles.Puede modificar esto cambiando "dblNumCollapsibles"

Answer 4

crear html de div Collapsible agregar dinámicamente a algún div y en ese div llamar a .trigger ('crear') $ (div) .trigger ('crear') esto creará ese div y renderiza el div plegable