3

可能重复：
动态添加可折叠元素

我想知道如何动态添加可折叠的 div，这样的事情可以用 Jqm listviews 来完成，之后调用 lisview('refresh')

这是测试代码：

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

编辑：在上面，它被附加和渲染，但多次

编辑2：看起来像这样工作？

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 的更新版本：http: //jsfiddle.net/UQWFJ/7/（请注意，我将您更改setTimeout为 asetInterval以不断向 DOM 添加新元素）

您也可以通过将新元素保存在变量中来优化这一点，这样您就可以.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 本身）上触发，从而为您节省手动初始化每个插件（listview 按钮、选择等）的任务。

例如，如果通过 Ajax 加载了 HTML 标记块（例如登录表单），则触发 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 回答