1 369 Сегодня мы вам покажем, как можно написать простое универсальное приложение чтения RSS каналов.
В приложении использованы следующие технологии: Mobile jQuery, jQuery, JFeed, HTML 5 и PHP.
Собственно, самая трудоемкая часть приложения — это разметка документа.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Application</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="js/main.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> <script type="text/javascript" src="jfeed/build/dist/jquery.jfeed.pack.js"></script> </head> <body onload="init()"> <!-- begin first page --> <section id="page1" data-role="page" data-theme="b"> <header data-role="header"> <h1>JQuery Mobile RSS feed</h1> </header> <div data-role="content" class="content"> <ul data-role="listview" data-inset="true" data-theme="a"> <li data-role="divider" data-theme="b">Design</li> <li onclick="url='http://css.flepstudio.org/en/feed'"><a href="#page2">FlepStudio CSS</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> <li onclick="url='http://feeds.feedburner.com/FlashCs3AndFlashCs4Tutorials'"><a href="#page2">FlepStudio Flash</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> <li onclick="url='http://feeds.feedburner.com/SitepointFeed'"><a href="#page2">SitePoint</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> </ul> <ul data-role="listview" data-inset="true" data-theme="a"> <li data-role="divider" data-theme="b">News</li> <li onclick="url='http://feeds.guardian.co.uk/theguardian/world/rss'"><a href="#page2">World News</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> <li onclick="url='http://feeds.nytimes.com/nyt/rss/HomePage'"><a href="#page2">NY Times</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> </ul> <ul data-role="listview" data-inset="true" data-theme="a"> <li data-role="divider" data-theme="b">Sport</li> <li onclick="url='http://sports.yahoo.com/soccer/rss.xml'"><a href="#page2">World Soccer News</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> <li onclick="url='http://www.nfl.com/rss/rsslanding?searchString=home'"><a href="#page2">NFL Top Headlines</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> <li onclick="url='http://mlb.mlb.com/partnerxml/gen/news/rss/mlb.xml'"><a href="#page2">Major League Baseball</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> <li onclick="url='http://sports.yahoo.com/nba/rss.xml'"><a href="#page2">NBA News</a><img src="assets/icons/rss.png" class="ui-li-icon"></li> </ul> </div> <footer data-role="footer"> <h2>example by FlepStudio</h2> </footer> </section> <!-- end first page --> <!-- begin second page --> <section id="page2" data-role="page" data-theme="b"> <header data-role="header"> <h1>JQuery Mobile RSS feed</h1> </header> <div data-role="content" class="content"> <ul data-role="listview" data-inset="true" data-theme="a"> </ul> </div> <footer data-role="footer"> <h2>example by FlepStudio</h2> </footer> </section> <!-- end second page --> </body> </html> |
Немного логики.
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
var url=""; function init() { $("#page2").bind("pageshow", function onPageShow(event, ui) { $.mobile.pageLoading(); refreshFeed(); }); $("#page2").bind("pagehide", function onPageHide(event, ui) { $("#page2 ul").empty(); }); } function refreshFeed() { jQuery.getFeed({ url: "php/proxy.php?url="+url, success: function(feed) { $("#page2 ul").append('<li data-role="divider" data-theme="b">'+feed.title+'</li>'); for(var i = 0; i < feed.items.length && i < 10; i++) { var item = feed.items[i]; $("#page2 ul").append('<li><a href="'+item.link+'">'+item.title+'</a></li>'); } $('#page2 ul').listview('refresh'); $.mobile.pageLoading( true ); } }); } |
И совсем чуть-чуть PHP кода для чтения RSS данных.
PHP
|
1 2 3 4 5 |
<?php $filename = $_REQUEST['url']; header('Content-Type: text/xml'); readfile($filename); ?> |
Вот и все.
Здравствуйте!
Пытаюсь сделать rss-читалку в виде расширения к FireFox (т.е. читалка не для сайта, а для конечного пользовательского компа), используя jFeed.
Брал пример с блога разработчика jFeed, вписывал адрес своей ленты — работает только в браузере Maxthon, в остальных браузерах лента не загружается (но ошибок никаких не выдает). Лента проверена на валидность, читалка для FF Sage эту же ленту читает. Взял Ваш пример, в main.js строку url: «php/proxy.php?url=»+url, заменил на url: url,. В Макстоне открываются все ленты. В других браузерах просто вечный loading. Подскажите, пожалуйста, где искать проблему.
Спасибо!
вы столько информации дали, но и ее к сожалению не достаточно.
не могли бы вы скинуть исходники или ссылку на вашу разработку?
Попробую так объяснить:
Скачиваю Ваш пример. Вношу единственное изменение в main.js: строку url: «php/proxy.php?url=»+url, заменяю на url: url, .
Запускаю в браузере Ваш index.html
В Макстоне всё работает, можно прочитать все ленты. В других браузерах ленты не загружаются. Firebug выдает: Ошибка синтаксического анализа XML: элемент не найден Адрес: moz-nullprincipal:{86782ce3-b63c-4a6c-a17a-76db686221a8} Строка 1, символ 1: с любой лентой.
До того, как нашел Ваш пример, самостоятельно ковырялся с jFeed, была точно такая же проблема. Причем этиже ленты тот же FireFox отлично открывает другими читалками. Я пробовал Sage. Но там не используется jQuery. Там сделано через XmlHttpRequest. Вот такая проблема.
этот скрипт не будет работать локально.
нужен php.
+ на счет того что вы добавили прямую ссылку на rss канал.
Тут я вам не смогу помочь, у меня также не открывается в основных браузерах и причина не совсем понятна.
Попробуйте обратится к разработчику jfeed.
Есть пример RSS читалки без серверной части