如何在移动应用程序中明智地显示xml内容页面?

时间:2015-06-05 09:07:44

标签: javascript jquery html xml jquery-mobile

我正在开发一个移动应用,我从中获取xml文件中的数据。但我面临的问题是,我将所有的xml内容放在一起,但在移动应用程序中,我希望以页面方式显示它,这是第一页将有5个产品,第二个将有接下来的5个产品,所以直到产品结束。我怎么能这样做。

这是我用来阅读,解析和显示的html和javascript文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript">   </script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    $("#dvContent").append("<div></div>");
    $.ajax({
        type: "GET",
        url: "http://localhost/donotdel/d/cat.xml",
        dataType: "xml",
        success: function(xml){
            $(xml).find('product').each(function(){
            var sModel = $(this).find('model').text();
            var sName = $(this).find('name').text();
            var sDescription = $(this).find('description').text();
            var sImage = $(this).find('image').text();
            var sPrice = $(this).find('price').text();
            var sSpecial = $(this).find('specialPrice').text();
            $("<li></li>").html(sModel + ", " + sName + ", " + sDescription + ", " + sImage + ", " + sPrice + ", " + sSpecial ).appendTo("#dvContent div");
        });
        },
        error: function() {
        alert("An error occurred while processing XML file.");
        }
     });
   });    
 </script>
 <style type="text/css">
 body
 {
   font-family  : Arial;
   font-size  : 10pt;
 }
 </style>
 </head>
 <body>
 <form id="form1" runat="server">
 <div id="dvContent">

</div>
</form>

现在我正在获取所有产品,但我想每次只获得5个产品并显示并点击下一个或页码我希望他们转到我显示其他5个产品的页面。那怎么办呢。

1 个答案:

答案 0 :(得分:0)

如果我理解正确,听起来您知道如何将XML解析为数据,但您只想一次显示5个。我要做的是:

解析XML。 编写一个显示X到Y行的泛型函数。 用1-5表示。

在您的页面中包含两个按钮。向他们添加touchend听众,这样当你点击一个(nextButton或其他)时,它只需运行通用功能来显示下一个页面&#39;数据的。

你需要记住所有项目的数量,这样你才能超越最终目标,显然不要让人们低于1。