Modify /assets/mypage.html in last exercise.
<!doctype html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Android-er</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>
<script src="https://www.google.com/jsapi"/>
<script >
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://feeds.feedburner.com/Android-er");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var feedlist = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var li = document.createElement("li");
var entry = result.feed.entries[i];
var A = document.createElement("A");
A.setAttribute("href",entry.link);
A.appendChild(document.createTextNode(entry.title));
li.appendChild(A);
feedlist.appendChild(li);
}
$("#feed").listview("refresh");
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Android-er</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="feed" />
</div>
<div data-role="footer">
<h4><a href="http://androidevsrom.blogspot.com/">Android-er</a></h4>
</div>
</div>
</body>
</html>
Download the files.
0 Response to "Display Google Feed in mobile style, using jQuery Mobile."
Post a Comment