loadmore & scroll

loadmore

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

 <div data-role="page">
 <div data-role="content">
     <ul data-role="listview">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
         <li>13</li>
         <li>14</li>
         <li>15</li>
         <li>16</li>
         <li>17</li>
         <li>18</li>
         <li>19</li>
         <li class="load-more"><a href="#">Load More</a></li>
     </ul>
 </div>
 </div>

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

scroll

 <div data-role="page">
     <div id="header" data-role="header">
         <h1>My Title</h1>
     </div><!-- /header -->

     <div data-role="content">
         <div class="content-primary">
             <ul data-role="listview" id="list">
             </ul>
         </div>
     </div><!-- /content -->

     <div id="footer" data-role="footer">
         <h1>My Footer</h1>
     </div><!-- /header -->

 </div><!-- /page -->

 // load test data initially
 for (i=0; i < 10; i++) {
     $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>"));
 }
 $("#list").listview('refresh');

 // load new data when reached at bottom
 $('#footer').waypoint(function(a, b) {
     // Load some dynamic data with $.ajax
    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
         dataType: "jsonp",
         jsonpCallback: 'successCallback',
         async: true,
         beforeSend: function() {
             $.mobile.showPageLoadingMsg(true);
         },
         complete: function() {
             $.mobile.hidePageLoadingMsg();
         },
         success: function (result) {
             ajax.parseJSONP(result);
         },
         error: function (request,error) {
             //alert('Network error has occurred please try again!');
         }
     });
     $('#footer').waypoint({
         offset: '100%'
     });
 }, {
     offset: '100%'
 });

 $('#index').live('pagebeforeshow',function(e,data){        

 });

 var ajax = {
     parseJSONP:function(result){
         //var jsonObj = jQuery.parseJSON(parameters);
         $("#list").append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
         $("#list").append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
         $("#list").append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
         $("#list").append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
         $("#list").append('<li>Released:<span> ' + result[0].released+ '</span></li>');
         $("#list").listview('refresh');
     }
 }