ListView Pagination
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.pajinate.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div id="wrapper">
<div data-role="content" id="paging_container1" class="container">
<div class="page_navigation"></div>
<input type="button" id="driver" value="Click Me For Pagination" />
<ul class="content" data-role="listview" data-inset="true" data-theme="a" data-split-theme="d" data-dividertheme="f" id="li-nav"> </ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<a href="#home" data-icon="home">Home</a>
<h6>Details Page</h6>
<a data-rel="back" data-icon="back">Go back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<h2>Footer Content</h2>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var html = "";
var i;
var des;
var StoreTitle=new Array();
var StoreDescr=new Array();
var StorePub=new Array();
var StoreAuthor=new Array();
var indexDes;
var Total=[];
var url = "http://www.news.admin.ch/dienstleistungen/00008/00131/00148/index.html?lang=de&rss-id=0_0";
$(document).ready(function() {
alert("Function start");
// $("#driver").click(function(event){
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20feed%20where%20url%3D%22"+encodeURIComponent(url)+
"%22&format=json'&callback=?", function(data) {
if(data)
{
for(i=0;i < data.results.length; i++)
{
var obj = data.results[i];
xmlDoc = $.parseXML( obj );
$xml = $(xmlDoc ),$title = $xml.find( "title" ).text();
var t=$title;
$link= $xml.find("link").text();
$description= $xml.find("description").text();
des=$description;
$pubDate= $xml.find("pubDate").text();
$author=$xml.find("author").text();
StoreTitle[i]=$title;
StoreDescr[i]=$description;
StorePub[i]=$pubDate;
StoreAuthor[i]=$author;
$('#li-nav').append('<li id=list'+i+'><a href="#page2">'+$title+'</a></li>').listview('refresh');
}
}
else
{
alert("Error message in downloading data");
}
});
//});
});
$("#driver").click(function(event){
$('#paging_container1').pajinate();
});
var a;
$("li").live("click", function(evt)
{
if($(this).text()!= "")
{
var c=$(this).text();
indexDes = StoreTitle.indexOf(c);
var currentId = $(this).attr('id');
}
else
{
}
});
function qs()
{
var i;
Total[0]=StoreTitle[indexDes];
Total[1]=StoreDescr[indexDes];
Total[2]=StorePub[indexDes];
Total[3]=StoreAuthor[indexDes];
for(i=0;i<3;i++)
{
Total[i];
}
return StoreDescr[indexDes];
}
$('#page2').live('pageshow', function(event, ui) {
$("#p1").text(StoreTitle[indexDes])
$("#p2").text(StoreDescr[indexDes])
$("#p3").text(StorePub[indexDes])
$("#p4").text(StoreAuthor[indexDes])
});
</script>
Comments
Post a Comment