3

重複の可能性：
折りたたみ可能な要素を動的に追加する

折りたたみ可能なdivを動的に追加する方法を知りたいのですが、そのようなことはJqm listviewsで実行でき、後にlisview（'refresh'）を呼び出します。

テストコードは次のとおりです。

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

編集：上記では、追加およびレンダリングされていますが、複数回

edit2：このように機能しているようですか？

4

4 に答える 4

9

refresh要素を初期化しているので（リフレッシュしていない）、を省略してはどうでしょうか。

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

JSFiddle の更新バージョンは次のとおりです。setTimeoutsetInterval

また、新しい要素を変数に保存することでこれを最適化できるため、.collabsible()その要素だけを呼び出すことができます。

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

$element.collapsible();

この最適化を行った JSFiddle は次のとおりです: http://jsfiddle.net/UQWFJ/9/

于 2012-02-21T17:39:29.633 に答える
0

jQM ドキュメント:

新しいマークアップ
の強化 ページ プラグインは、ほとんどのウィジェットが自身を自動初期化するために使用する pagecreate イベントを送出します。ウィジェット プラグイン スクリプトが参照されている限り、ページ上で見つかったウィジェットのインスタンスが自動的に拡張されます。

ただし、新しいマークアップをクライアント側で生成するか、Ajax を介してコンテンツを読み込んでページに挿入する場合は、create イベントをトリガーして、新しいマークアップに含まれるすべてのプラグインの自動初期化を処理できます。これは任意の要素 (ページ div 自体も含む) でトリガーできるため、各プラグイン (リストビュー ボタン、選択など) を手動で初期化するタスクを節約できます。

たとえば、HTML マークアップのブロック (ログイン フォームなど) が Ajax を介して読み込まれた場合、create イベントをトリガーして、そこに含まれるすべてのウィジェット (この場合は入力とボタン) を拡張バージョンに自動的に変換します。このシナリオのコードは次のようになります。

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
于 2012-02-21T17:44:20.793 に答える
0

これがあなたが望むものかどうかはわかりませんが、折りたたみ可能な div を動的に追加できるようにすることだけが必要な場合は、コード側でこれを行うことができます。たとえば、私は aspx.vb を使用していますが、他の言語を使用している場合は、これを状況に合わせて簡単に適応させることができます。.aspx(html コード) で、動的な html コードを表示する場所にこのコード行を記述します。

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

これが完了したら、画面を右クリックして「コードの表示」を選択します

次に、これを追加します

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

これにより、7 つの折りたたみ可能な div リストバーが動的に追加されます。これは、「dblNumCollapsibles」を変更することで変更できます

于 2012-02-22T13:17:27.093 に答える
0

折りたたみ可能な div の html を作成し、いくつかの div に動的に追加し、その div 呼び出しで .trigger('create') $(div).trigger('create') を呼び出します。これにより、その div が作成され、折りたたみ可能な div がレンダリングされます。

于 2012-02-28T07:50:48.770 に答える