如何获得动态JQuery Mobile手风琴?

时间:2012-07-03 14:46:24

标签: javascript jquery jquery-mobile

我试图使用PhoneGap和JQuery Mobile设计一个基本的RSS提要阅读器。首先加载页面,显示提要需要一些时间。我正在尝试为每个帖子添加一个手风琴,以便用户可以看到帖子标题并在感兴趣时展开帖子。这是我使用的片段:

for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var title = entry.title,
    link = entry.link,
    description = entry.contentSnippet,
    pubDate = entry.publishedDate;
    feedItem = feedItem + '<div data-role="collapsible" data-theme="a" data-content-theme="a"><h3><a href="' + link + '>';
    feedItem = feedItem + '<span class="feeditemtitle">' + title + '</span>';
    feedItem = feedItem + '</a></h3>';
    feedItem = feedItem + '<h6>' + pubDate + '</h6>';
    feedItem = feedItem + '<p>' + description + '</p></div>';
}

我可以在页面上找到帖子,但没有手风琴。它将帖子呈现为纯HTML。我假设这是因为在页面加载后帖子加载。有人可以帮我这个吗?

2 个答案:

答案 0 :(得分:3)

您必须刷新加载的内容。

假设它附加到此节点<div id="loaded-content" data-role="collapsible-set"></div>,您必须执行以下操作:

$('.loaded-content').collapsibleset('refresh');

你可以看看我的小提琴模仿Ajax调用并创建一个延迟的手风琴:http://jsfiddle.net/ooflorent/FkT8H/

答案 1 :(得分:0)

for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var title = entry.title,
    link = entry.link,
    description = entry.contentSnippet,
    pubDate = entry.publishedDate;
    feedItem = feedItem + '<div data-role="collapsible" class="accordItem" data-theme="a" data-content-theme="a"><h3><a href="' + link + '>';
    feedItem = feedItem + '<span class="feeditemtitle">' + title + '</span>';
    feedItem = feedItem + '</a></h3>';
    feedItem = feedItem + '<h6>' + pubDate + '</h6>';
    feedItem = feedItem + '<p>' + description + '</p></div>';
    if(i == result.feed.entries.length-1){
        $(".accordItem").collapsible();
    }
}