如何获得动态 JQuery 移动手风琴.

How to obtain a dynamic JQuery Mobile Accordion?

本文关键字:移动 手风琴 JQuery 动态 何获得      更新时间:2023-09-26

我试图使用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。我认为这是因为帖子在页面加载加载。谁能帮我解决这个问题?

您必须刷新加载的内容。

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

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

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

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();
    }
}