jquerymobile iscrollview

发布时间:2020-10-03 04:58:07 作者:antlove
来源:网络 阅读:806

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">
        <h2>INDEX PAGE</h2>
      </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">
        <h2>My Footer</h2>
      </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>


附件:http://down.51cto.com/data/2366203
推荐阅读:
  1. 五个最佳案例带你解读Node.js的前后之道
  2. 关于判断web是手机端还是电脑端访问以及复制删除按钮的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web js mobile

上一篇:layui select获取自定义属性方法

下一篇:使用Docker搭建ELK日志系统的方法示例

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》