PhoneGap jQueryMobile列表视图无法在辅助页面上正确显示

时间:2013-01-29 07:34:40

标签: jquery listview cordova jquery-mobile

我正在使用jQueryMobile开发PhoneGap应用程序。我的问题是listview无法在相册页面上正确显示,但在主页上。我对两者使用相同的data-theme

问题:为什么第二页上的列表视图无法正确显示(背景,字体,图标)?

研究:

  1. jQueryMobile documentation on thumbnail listviews (what I'm trying to accomplish)
  2. jQueryMobile documentation on listview api
  3. Google searched and found a tutorial on how to do this (no change)
  4. 相册页面代码

        <div data-role="page" id="albums" data-url="albums" data-theme="a">
            <div data-role="header">
                <a href="#home" data-role="button" data-corners="true" data-shadow="true">Back</a>
                <h1>Albums</h1>
                <button id="albums-refresh">Refresh</button>
            </div>
            <div data-role="content">
                <ul id="albums-content" data-role="listview" data-inset="true"></ul>
            </div>
        </div>
    

    jQuery函数动态填充listview

    Load: function () {
        $("#albums-content").empty();
        $.ajax({type: "GET", url: "https://itunes.apple.com/lookup?id=356541460&entity=album", data: {get_param: "results"}, dataType: "json", success: function (data) {$.each(data, function (index, element) {$.each(this, function (index, element) {if (element.wrapperType === "collection") {$("#albums-content").append("<li><a id='a-" + index + "' href='#album-details'><img src='" + element.artworkUrl100 + "' />" + element.collectionName + "</a>"); $("#a-" + index).bind('click', function (index) {Albums.AlbumID = index; }); }}); }); }});
    }
    

    PhoneGap调试:

    enter image description here

    相册页面 请注意,紫色背景和橙色文字不存在,但您可以在第二张专辑下方看到listview投影的微弱暗示。

    enter image description here

3 个答案:

答案 0 :(得分:2)

您必须确保:在将所有内容附加到列表视图后,您必须添加以下代码

$("ul#albums-content").listview("refresh");

这是更新样式并创建添加的任何嵌套列表。

答案 1 :(得分:2)

这个问题有一个简单的解决方案(下次再深入研究jQM文档)。

jQuery Mobile 列表视图中动态创建对象时,其标记也需要像这样增强:

$('#some-listview').listview('refresh');

基本上每次将动态内容添加到jQuery Mobile页面时,都需要手动增强。如果您想了解有关此主题的更多信息,请查看我的博客 ARTICLE 。或者你可以找到 HERE

答案 2 :(得分:2)

在ajax调用的success函数中,您需要调用listview元素的refresh方法,以便更新和正确呈现UI。

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html