使用jquery mobile获取rss新闻源

时间:2011-09-26 07:02:47

标签: jquery html css jquery-plugins jquery-mobile

我正在制作一个移动网络应用。这个应用程序将从雅虎获得新闻。我目前正在使用jquery插件来获取这些消息。我也使用jquery mobile进行界面操作。在索引页面上我有listview,它包含所有标题,如热门新闻,世界新闻,体育新闻等。这是索引页面代码

<html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1, user-scalable = no" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>
<body>
    <div data-role="page">
        <header data-role="header">
            <h1>Yahoo News</h1>
        </header>
        <div data-role="content">
            <ul data-role="listview" data-inset="true">
                <li><a href="topNews.php" data-transition="slidedown">Top Stories</a></li>
                <li><a href="worldNews.php" data-transition="slidedown">World News</a></li>
                <li><a href="techNews.php" data-transition="slidedown">Technology</a></li>
                <li><a href="scienceNews.php" data-transition="slidedown">Science</a></li>
                <li><a href="enterNews.php" data-transition="slidedown">Entertainment</a></li>
                <li><a href="sportsNews.php" data-transition="slidedown">Sports</a></li>
            </ul>
        </div>
        <footer data-role="footer">
            <h4>Footer</h4>
        </footer>
    </div>
</body>

因此,当USer点击让我们说Top Stories时,它会将用户带到适当的页面并在该页面上显示热门新闻。现在它确实将用户带到了顶级新闻页面,但当他到达那里时他没有看到任何新闻。该页面是空的。但是当用户通过单击浏览器的刷新按钮刷新此页面时,它会显示所有新闻。所以我的问题是它应该在显示顶级新闻页面时显示新闻。

这是热门新闻页面代码

<html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1, user-scalable = no" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.jfeed.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.aRSSFeed.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
        $('div.RSSAggrCont').aRSSFeed();
    });
    </script>
</head>
<body>
    <div data-role="page">
        <header data-role="header">
            <a href="#" data-transition="slidedown" data-rel="back" data-icon="arrow-l">Back</a>
            <h1>Top News</h1>
        </header>
        <div data-role="content">
            <div class="RSSAggrCont" rssnum="5" rss_url="http://rss.news.yahoo.com/rss/topstories">

            </div>
        </div>
        <footer data-role="footer">
            <h4>Footer</h4>
        </footer>
    </div>
</body>

有人可以告诉我,我在哪里弄错了吗?任何解决方案请

1 个答案:

答案 0 :(得分:4)

有一篇名为 How to build an RSS reader with Jquery Mobile 的精彩文章。它将指导您完成整个过程的每一步。