Dynamic Lists
Description
We can create and update our lists. There are two options available for creating dynamic lists.
We can create lists dynamically with a markup-driven approach or by explicitly setting the options on the listview plugin.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<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>
</head><!--from ww w . j a v a 2 s. c o m-->
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Dynamic Lists</h1>
</div>
<div data-role="content">
<a href="#" id="create-list1" data-role="button">Create list1</a>
<a href="#" id="create-list2" data-role="button">Create list2</a> <br>
<a href="#" id="update-list1" data-role="button" data-theme="a">Update list1</a>
</div>
<script type="text/javascript">
$( "#create-list1" ).bind( "click", function() {
$( '<ul data-inset="true" id="list1"><li data-role="list-divider">G</li><li><a href="#">A</a></li><li><a href="#">C</a></li></ul>' )
.insertAfter( "#create-list1" )
.listview();
});
$( "#create-list2" ).bind( "click", function() {
$( '<ul><li data-role="list-divider">G</li><li><a href="#">A</a></li><li><a href="#">C</a></li></ul>' )
.insertAfter( "#create-list2" )
.listview({
theme: "d",
dividerTheme: "c",
inset: true,
create: function(event) {
for (prop in event) {
console.log(prop + ' = ' + event[prop]);
}
}
});
});
$( "#update-list1" ).bind( "click", function() {
$( "#list1" )
.append('<li><a href="#">Drama</a></li>')
.listview('refresh');
});
</script>
</div>
</body>
</html>