0

私はjqueryの完全な初心者であり、xmlによって作成され、クリックすると表示ページにつながるボタンのコレクションを表示するリストをコーディングする最善の方法について、助けを求めています。

ページにアクセスし、関心のある領域 (リストビュー) を選択すると、xml が読み込まれ、その領域のコンテンツのリスト (リストビュー) が表示されます。リスト項目をクリックすると、テキスト、ビデオなどが表示されるコンテンツ ページに移動します。対処しなければならないフィードが 20 あります。

1 つの 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'); 
            });

        }
4

0 に答える 0