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>