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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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 >