Jquerymobile adicionando divs recolhíveis dinâmicos [duplicar]

Question

Possível duplicado:
Adicionar elementos recolhíveis dinamicamente

Gostaria de saber como posso adicionar dinamicamente um div recolhível, isso pode ser feito com listviews Jqm, chamando lisview ('atualizar') depois de

aqui está o código de teste:

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

editar: acima, é anexado e renderizado, mas várias vezes

edit2: parece funcionar assim?

Answer 1

Que tal omitir o refresh já que você está inicializando o elemento (não atualizando):

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

Aqui está uma versão atualizada do seu JSFiddle: http://jsfiddle.net/UQWFJ/7/ (Observe que alterei seu setTimeout para um setInterval para adicionar continuamente novos elementos ao DOM)

Além disso, você pode otimizar isso salvando o novo elemento em uma variável para que possa chamar .collabsible() apenas nesse elemento:

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

$element.collapsible();  

Aqui está um JSFiddle com esta otimização: http://jsfiddle.net/UQWFJ/9/

Answer 2

jQM Docs:

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

Aprimorando a nova marcação
O plug-in de página despacha um evento de criação de página, que a maioria dos widgets usa para se auto-inicializar. Tanto tempo como um script de plugin de widget é referenciado, ele automaticamente aprimorará quaisquer instâncias dos widgets que encontrar na página.

No entanto, se você gerar uma nova marcação do lado do cliente ou carregar o conteúdo via Ajax e injetá-lo em uma página, você pode acionar o evento de criação para lidar com a inicialização automática para todos os plugins contidos dentro a nova marcação. Isso pode ser acionado em qualquer elemento (até mesmo a página div), poupando a tarefa de inicializar manualmente cada plugin (botão listview, selecionar, etc.).

Por exemplo, se um bloco de marcação HTML (digamos, um formulário de login) foi carregado através do Ajax, acione o evento de criação para transformar automaticamente todos os widgets que ele contém (entradas e botões, neste caso) no versões aprimoradas. O código para este cenário seria:

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

Answer 3

Não tenho certeza se isso é o que você deseja, mas se tudo o que deseja fazer é adicionar dinamicamente divs recolhíveis, você pode fazer isso no lado do código.Por exemplo, eu uso aspx.vb, mas se você usar algum outro idioma, poderá adaptá-lo facilmente à sua situação.Em seu .aspx (código html), escreva esta linha de código onde deseja que o código html dinâmico apareça.

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

Feito isso, clique com o botão direito na tela e escolha "visualizar código"

Então você adiciona isso

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

Isso adicionará dinamicamente 7 barras de lista div recolhíveis.Você pode alterar isso alterando "dblNumCollapsibles"

Answer 4

criar html de div recolhível, adicionar dinamicamente a algum div e nessa div chamar .trigger ('criar') $ (div) .trigger ('create') isso criará esse div e renderizará o div recolhível