Listview 加载更多

JQM Listview 加载更多 demo - Warren的个人主页

JQM Listview 加载更多 Demo

• 测试数据1
• 测试数据2
• 测试数据3
• 测试数据4

显示更多

Page Footer

<!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>
                    &nbsp;
                </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>