Mobile RSS Reader jQuery/html5
Web based mobile RSS feed reader, build with jQuery. Live Demo(finnish): http://www.kopteri.net/koti/aatu.hieta/index.html
<!-- live demo (in finnish) http://www.kopteri.net/koti/aatu.hieta/index.html --> <!DOCTYPE html> <html> <head> <title>Kopteri RSS</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <script> var rssurl = "feeds.xml"; var $feeds = {}; var markup = "<li><a name=\"${a}\" href=\"#feedinfo?id=${a}\"><img src=\"${img}\" /><h2>${title}</h2> ${description}</li></a>"; $(document).ready(getFeeds()); function getFeeds() { $.ajax({ url: rssurl, success: showFeeds }); } function showFeeds( data ) { $("#feeds").html(""); $("#feeds").listview(); $feeds = $(data).find("item"), keys = ["title", "link", "description", "guid", "img", "link"]; var i = 0; $feeds.each(function (idx, elem) { var $this = $(this), data = {}; data["a"] = i; keys.forEach(function (key) { data[key] = $this.find(key).text(); }); $feeds[i] = data; i++; $.tmpl( markup, data ) .appendTo( "#feeds" ); }); $("#feeds").listview("refresh"); //(c) by taatudi } $(document).bind( "pagebeforechange", function( e, data ) { if ( typeof data.toPage === "string" ) { getFeeds(); var u = $.mobile.path.parseUrl( data.toPage ), re = /^#feedinfo/; if ( u.hash.search(re) !== -1 ) { showFeed( u, data.options ); e.preventDefault(); } } }); function showFeed( urlObj, options ) { var guid = urlObj.hash.replace( /.*id=/, "" ), feed = $feeds[guid], pageSelector = urlObj.hash.replace( /\?.*$/, "" ); if ( feed ) { var $page = $( pageSelector ), $header = $page.children( ":jqmData(role=header)" ), $content = $page.children( ":jqmData(role=content)" ), markup = "<p>" + feed["description"] + "</p>"; $("#readmore").attr("href", feed['link']); $header.find( "h1" ).html( feed["title"] ); $content.html( markup ); $page.page(); options.dataUrl = urlObj.href; $.mobile.changePage( $page, options ); } } function back() { var $page = $( '#mainpage' ); $page.page(); $.mobile.changePage( $page ); } </script> </head> <body> <div id="mainpage" data-role="page" data-theme="a"> <div class="header" data-role="header" style="max-height:64px;"> <h1>Kopteri RSS</h1> </div><!-- /header --> <div data-role="content"> <ul id="feeds" data-role="listview" data-inset="true" data-filter="false"></ul> </div><!-- /content --> </div><!-- /page --> <div id="feedinfo" data-role="page" data-theme="a"> <div data-role="header"><h1></h1></div> <a href="./index.html" onclick="back();" data-role="button" data-icon="back">Takaisin</a> <div data-role="content"></div> <a id="readmore" data-role="button" >Lue lisää</a> </div> </body> </html>

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here