码迷,mamicode.com
首页 > 其他好文 > 详细

Listview 加载更多

时间:2014-07-22 22:59:16      阅读:425      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   java   color   

 

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

JQM Listview 加载更多 Demo

Page Footer

 

 

 

 

mamicode.com,码迷
<!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>
mamicode.com,码迷

 

Listview 加载更多,码迷,mamicode.com

Listview 加载更多

标签:des   style   blog   http   java   color   

原文地址:http://www.cnblogs.com/zzlp/p/3703053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!