JQM Listview 加载更多 demo - Warren的个人主页
<!DOCTYPE HTML>
<html>
<head>
<title>JQM Listview 加载更多 demo - Warren的个人主页</title>
<meta name="keywords"
content="JqueryMobile JqueryMobile JqueryMobile教程 JQM Listview 加载更多 demo Warren" />
<meta name="description" content="JQM Listview 加载更多 demo" />
<meta name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript">
$(function() {
$("#btnMore").click(function() {
loadData();
});
});
function loadData(){
var content = "<li><a href=\"#\">这是加载的数据</a></li>";
$("#contentList").append(content).listview('refresh');
}
</script>
</head> <body>
<div data-role="page">
<div data-role="header">
<h1>
JQM Listview 加载更多 Demo
</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="contentList">
<li>
<a href="#">测试数据1</a>
</li>
<li>
<a href="#">测试数据2</a>
</li>
<li>
<a href="#">测试数据3</a>
</li>
<li>
<a href="#">测试数据4</a>
</li>
</ul>
<p>
</p>
<div id="moreDiv">
<button id="btnMore" data-icon="refresh">
显示更多
</button>
</div> </div>
<div data-role="footer">
<h4>
Page Footer
</h4>
</div>
</div> </body>
</html>