loadmore & scroll

loadmore

 1 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
 2 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 3 <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
 4 
 5 <div data-role="page">
 6 <div data-role="content">
 7     <ul data-role="listview">
 8         <li>1</li>
 9         <li>2</li>
10         <li>3</li>
11         <li>4</li>
12         <li>5</li>
13         <li>6</li>
14         <li>7</li>
15         <li>8</li>
16         <li>9</li>
17         <li>10</li>
18         <li>11</li>
19         <li>12</li>
20         <li>13</li>
21         <li>14</li>
22         <li>15</li>
23         <li>16</li>
24         <li>17</li>
25         <li>18</li>
26         <li>19</li>
27         <li class="load-more"><a href="#">Load More</a></li>
28     </ul>
29 </div>
30 </div>

View Code

1 var count     = 20,
2     $loadMore = $('ul').children('.load-more');
3 $loadMore.bind('click', function () {
4     var out = [];
5     for (var i = 0; i < 10; i++) {
6         out.push('<li>' + (count++) + '</li>');
7     }
8     $('ul').append(out.join('')).append($loadMore).listview('refresh');
9 });

View Code

scroll

 1 <div data-role="page">
 2     <div id="header" data-role="header">
 3         <h1>My Title</h1>
 4     </div><!-- /header -->
 5 
 6     <div data-role="content">    
 7         <div class="content-primary">    
 8             <ul data-role="listview" id="list">
 9             </ul>
10         </div>
11     </div><!-- /content -->
12     
13     <div id="footer" data-role="footer">
14         <h1>My Footer</h1>
15     </div><!-- /header -->
16 
17 </div><!-- /page -->

View Code

 1 // load test data initially
 2 for (i=0; i < 10; i++) {
 3     $("#list").append($("<li><a href="index.html"><h3>" + i + "</h3><p>z</p></a></li>"));
 4 }
 5 $("#list").listview('refresh');
 6 
 7 
 8 // load new data when reached at bottom
 9 $('#footer').waypoint(function(a, b) {
10     // Load some dynamic data with $.ajax
11    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
12         dataType: "jsonp",
13         jsonpCallback: 'successCallback',
14         async: true,
15         beforeSend: function() {
16             $.mobile.showPageLoadingMsg(true);
17         },
18         complete: function() {
19             $.mobile.hidePageLoadingMsg();
20         },
21         success: function (result) {
22             ajax.parseJSONP(result);
23         },
24         error: function (request,error) {
25             //alert('Network error has occurred please try again!');
26         }
27     });    
28     $('#footer').waypoint({
29         offset: '100%'
30     });
31 }, {
32     offset: '100%'
33 });
34 
35 $('#index').live('pagebeforeshow',function(e,data){        
36 
37 });
38 
39 
40 var ajax = {  
41     parseJSONP:function(result){
42         //var jsonObj = jQuery.parseJSON(parameters);
43         $("#list").append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
44         $("#list").append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
45         $("#list").append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
46         $("#list").append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
47         $("#list").append('<li>Released:<span> ' + result[0].released+ '</span></li>');        
48         $("#list").listview('refresh');
49     }
50 }

View Code