Question

我是jquery的总菜鸟，我正在寻求一些帮助，以便以最佳方式编写一个列表，该列表显示一组按钮，这些按钮指向由xml创建的列表，并在单击时指向显示页面。

这个想法是你进入页面，你选择一个感兴趣的领域（listview），它加载xml并显示该区域的内容列表（listview）。单击列表项，它会将您带到显示文本，视频等的内容页面。我有20个必须处理的提要。

我可以使用一个xml提要工作，但很难理解如何处理多个xml提要以及如何调用它们并显示它们。任何例子都会非常有帮助和赞赏。

这就是我所拥有的

<!DOCTYPE html>
<html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" href="js/jquery.mobile-1.1.0.min.css" />
        <script src="js/jquery-1.8.0.min.js"></script>
        <script src="js/jquery.mobile-1.1.0.min.js"></script>
        <script src="loader.js"></script>
        </head>
        <body>
        <div data-role="page" id="photos">
          <header data-role="header">
            <h2>DA News</h2>
          </header>
          <div data-role="content">
            <ul data-role="listview" data-filter="true">
              <li> <a href="#" id="btn">
                <h2>The Channel News</h2>
                <img src="images/icon_podcast-TCN_News.jpg" alt="TCN" />
                <p>The lastest headlines from around the gloab</p>
                </a> </li>
              <li> <a href="#mainPage">
                <h2>Staff Podcast</h2>
                <img src="images/icon_podcast-Stoff.jpg" alt="Staff Podcast" />
                <p>Staff Offical Podcast</p>
                </a> </li>
              <li> <a href="#mainPage" >
                <h2>Space</h2>
                <img src="images/icon_podcast-space.jpg" alt="space" />
                <p>space stories</p>
                </a> </li>
            </ul>
          </div>
          <footer data-role="footer" data-position="fixed">
            <nav data-role="navbar">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#list">list</a>
                <li><a href="#info">Info</a></li>
              </ul>
            </nav>
          </footer>
        </div>
        <!-- end of buttons -->

        <div data-role="page" data-rel="dialog" id="mainPage">
          <header data-role="header">
            <h1>tpc news</h1>
          </header>
          <footer data-role="footer" data-position="fixed">
            <nav data-role="navbar">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#list">list</a>
                <li><a href="#info">Info</a></li>
              </ul>
            </nav>
          </footer>
        </div>
        <!-- mainPage -->
        </div>
        <div data-role="page" id="contentPage">
          <div data-role="header">
            <h1>TC News</h1>
          </div>
          <div data-role="content" data-theme="a" id="entryText" style="text-align:center";> </div>
          <footer data-role="footer" data-theme="a" data-position="fixed">
            <nav data-role="navbar">
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#list">list</a>
                <li><a href="#info">Info</a></li>
              </ul>
            </nav>
          </footer>
        </div>
        <!-- contentPage -->

        </div>
</body>
        </html>
<scriptfile starts here ----loader.js------>
/*$(document).on('click','a#btn',function(){
    var xmlq = $("http://foo.xml").val();
$.mobile.changePage("#mainPage")
});*/


    var xml;
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "http://foo.xml",
            dataType: "xml",
            success: xmlParser
        });
    });
        function xmlParser(data) {
            xml = data;

            $('#load').fadeOut();

            $(xml).find("item").each(function () {
                title = $(this).attr("title");

                var title = $(this).find("title").text();
                var description = $(this).find("description").text();
                var pubDate = $(this).find("pubDate").text();
                var link = $(this).find("link").text();




    $("#list").append('
    <li>
          <h3 id="title">' + title + '</h3>
          <ul>
        <li>description: '+ description + '</li>
        <li>pubDate: '+ pubDate + '</li>
        <li>link: '+ link + '</li>
      </ul>
        </li>
    ');

                $('#list').listview('refresh'); 
            });

        }

listview打开新页面将xml加载到新的listview中，其中包含指向jquery mobile中子页面的链接

0 个答案: