jquerymobile iscrollview

iscrollview下载地址:https://github.com/watusi/jquery-mobile-iscrollview

iscroll 下载地址:http://cubiq.org/iscroll-4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Demo</title>

    <link rel="stylesheet" href="css/jquery.mobile.custom.structure.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.custom.theme.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.iscrollview-pull.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.iscrollview.css"/>

    <script src="jslib/jquery-1.9.0.js"></script>
     <script src="jslib/iscroll.js"></script>
    <script src="jslib/jquery.mobile.custom.js"></script>
   
    <script src="jslib/jquery.mobile.iscrollview.js"></script>
    
  </head>

  <body>
    <div data-role="page" id="iscrollPage" class="index-page">

      <div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
        <h1>INDEX PAGE</h1>
      </div>

      <div data-role="content" class="example-wrapper" data-iscroll>
        <div class="iscroll-pulldown" >
          <span class="iscroll-pull-icon"></span>
          <span class="iscroll-pull-label" data-iscroll-pulled-text="刷新" data-iscroll-loading-text="刷新中"></span>
        </div>

        <ul data-role="listview">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>

        <div class="iscroll-pullup">
          <span class="iscroll-pull-icon"></span>
          <span class="iscroll-pull-label" data-iscroll-pulled-text="加载" data-iscroll-loading-text="加载中"></span>
        </div>
      </div>

      <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
        <h1>My Footer</h1>
      </div>

    </div>

    <script type="text/javascript">
        $(document).on("pageinit","#iscrollPage",function(){

            $(".iscroll-wrapper", this).bind( {
              "iscroll_onpulldown":function(){
                  console.log("pull down ...");

                  $("#iscrollPage [data-role=listview]").empty();

                  setTimeout("refreshList()",500);

              },
              "iscroll_onpullup":function(){
                  console.log("pull up ... ");
                  
                  setTimeout("refreshList()",500);
              },
              iscroll_onpulldownloading:function(){
                  console.log("iscroll_onpulldownloading ... ");
              },
              iscroll_onpulldownpulled:function(){
                  console.log("iscroll_onpulldownpulled ... ");
              },
              iscroll_onpulldownreset:function(){
                  console.log("iscroll_onpulldownreset ... ");
              }
            });
        });

        function refreshList(){
            $("#iscrollPage [data-role=listview]").append("<li>Item 1</li>");

            $("#iscrollPage [data-role=listview]").listview("refresh");
        }
    </script>
  </body>
</html>


你可能感兴趣的:(js,jquery,Web,mobile,iScroll)