Find file
Fetching contributors…
Cannot retrieve contributors at this time
103 lines (77 sloc) 2.75 KB
<title>Dynamic Listview</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--JQM 1.1.0 version-->
<link rel="stylesheet" href="css/jquery-mobile-min.css"/>
<link rel="stylesheet" href="css/style.css" />
<!--JQuery 1.6.4 version-->
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jquery-mobile-min.js"></script>
function createListView(data) {
var moviesData = ["Titanic", "Spiderman", "Toy Story 3", "Iron Man 2",
"Terminator","Hackers", "Matrix"];
$.each(moviesData, function(index, movie) {
'<li>' +
'<a href="" onclick="changePage(id_' + index + ');">' +
'<h3>' + movie + '</h3>' +
'</a>' +
Here we are dynamically creating a new page.
When a list item is clicked, this is what is actually shown.
Do not forget to append this block of code
to the body tag. If appended mistakenly somewhere else,
the code wont work.
content = '<div data-role="page" id="id_' + index + '" data-url="id_' + index + '">' +
'<div data-role="header">' +
'<a href="#" data-rel="back" data-icon="back">Back</a>' +
'<h1>' + movie + '</h1>' +
'</div>' +
'<div data-role="content">' +
'<p>' +
'<div data-role="fieldcontain" class="result">' +
'</div>' +
'</p>' +
'</div>' +
/*Tell JQM to enhance the page with the required classes.*/
}); // end for each
/*This function helps is mapping each listitem to its correspondig
function changePage(id) {
$.mobile.changePage($(id), {transition : "slide"});
<div data-role="page" id="home">
<div data-role="header" data-add-back-btn="true"> <!-- This div with data-role is the header, shown in the black -->
<h1>Dynamic Listview</h1>
<div data-role="content">
<div class="result">
<a href="#" data-role="button" data-inline="true" onclick="createListView();">Create Dynamic Listview</a>
<!-- This is where the result of dynamically created listitems will be appended. -->
<ul id="result-listview" class="listview" data-role="listview" data-theme="b">
<!--Footer starts here-->
<div data-role="footer" data-position="fixed">
</div> <!--main page end-->