1

第一次玩 jQuery Mobile，但使用了一点 jQuery。希望得到一些快速的建议。

我正在解析头部中的一些 xml，并将数据作为列表写入带有 <li> 标签的 div 中。该列表出现在那里，但没有使用 jQuery Mobile 的默认样式进行格式化。我确定这是我做错的事情，但无法弄清楚我需要做什么才能应用该样式，或者我可能需要在“准备好”之外获取数据。这是我的代码。

这一定是一件很简单的事情，以至于我错过了。如果我在 HTML 中的 <li> 标记中进行硬编码，它可以正常工作，但如果我使用 use .append() 它不会显示列表的格式。

真的很感激你可能有的任何提示。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Chart</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" />
    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/jquery.mobile-1.0a2.min.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "xml/vc-data.xml",
    dataType: "xml",
    success: function(xml){
        // build country list
        var currentCountry = "";
        var currentRegion = "";
        $("#countries").html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>');
        $(xml).find("charts").each(function()
        {
            var country = $(this).find('country').text();
            var region = $(this).find('region').text();
            if(currentCountry != country) {
                //countryList += "<li><a href='#'>" + country + "</a></li>";
                $("<li data-role='list-divider'></li>")
                .html(country)
                .appendTo("#countries ul");
            }
            if(currentRegion != region) {
            $("<li></li>")
                .html("<a href='#'>" + region + "</a>")
                .appendTo("#countries ul");
            }
            currentCountry = country;
            currentRegion = region;
        });
    }
  });
});

</script>
</head> 
<body> 

<!-- Start of first page -->
<div data-role="page">

    <div data-role="header">
        <h1>Charts</h1>
    </div><!-- /header -->

    <div data-role="content" id="countries" >   

    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

嘿。非常感谢这个回复。我想我是用错误的关键字搜索的，因为我在任何地方都找不到这个，而且在过去的几天里一直卡住。我真的很感谢这里的帮助。我正要继续使用 jqTouch 作为一种选择，但我很想让它发挥作用。我想我快到了。

我试着添加这个：

 $("#countries > ul").page();

但它没有影响任何东西。

然后我补充说：

$("#countries div > ul").page();

这影响了链接颜色，但根本没有用间距等设置行的样式。

然后，我进行了更多挖掘，并在我错过的文档中找到了这一点：

如果将项目添加到列表视图，则需要对其调用 refresh() 方法来更新样式并创建添加的任何嵌套列表。例如，$('ul').listview('refresh');

所以我用这一行替换了 page()，它工作得很好。

$("#countries div > ul").listview('refresh');
4

1 回答 1

1

您缺少的不是一件简单的事情。完成后，jQuery mobile 不会自动格式化新创建的内容。我想这将是一个性能猪。

您必须将 jQuery 移动.page()方法应用于您创建的最顶层元素。

在你的情况下，我认为应该是：

$("#countries>ul").page();

详细操作方法：http: //jquerymobiledictionary.dyndns.org/faq.html

（“如何让 JQM 处理我添加到 DOM 的内容？”问题）

[编辑]

我假设 #countries 是内容中的一个 div 并且您创建了 ul 元素。您没有阅读我链接到的教程。您绝对必须创建一个新的包装元素。不能使用 HTML 源代码中存在的元素，.page()因为它已经存在。

使用此 HTML

<div id="countries" data-role="page">    
    <div data-role="header">
        <h1>Chart</h1>
    </div><!-- /header -->

    <div data-role="content" id="here">   

    </div><!-- /content -->   
</div>

这个成功函数的代码：

success: function(xml){
            // build country list
            var currentCountry = "";
            var currentRegion = "";
            $('#here').html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>');
            var $here=$('#here > ul');

            //var countryList = "";
            $(xml).find("chart").each(function()
            {
                var country = $(this).find('country').text();
                var region = $(this).find('region').text();
                if(currentCountry != country) {
                    $("<li></li>").html(country).appendTo($here);
                }
                if(currentRegion != region) {
                    $("<li></li>").html("<a href='#'>" + region + "</a>").appendTo($here);
                }
                currentCountry = country;
                currentRegion = region;
            });

            $here.page();
        }

如果它不起作用，请检查以下其中一项：

  1. 您应该使用 jquery 1.4.3（1.4.4 与 jqm 有一些问题）
  2. 看看是否调用了成功函数

我测试了它，它对我有用。

于 2010-12-13T18:25:14.523 回答