1

私はJQueryモバイルを学んでおり、問題解決の例を探しています。JSON クエリを反復処理して、1 つの HTML ページ内に複数のページを動的に作成したいと考えています (マルチページhttp://jquerymobile.com/test/docs/pages/multipage-template.htmlを参照)。理想的には、各ページに進む/戻るボタンがあり、JQuery モバイル ページを進む/戻ることができます。

更新：これまでに持っているもの。

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Get JSONP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
 </head>
<body>
<div id="target">
<script>
// best to put this code in an external .js file
var loadtwitter = function() {

  $.getJSON('http://search.twitter.com/search.json' + '?q=jquery&callback=?', function(data) {
     $.each(data.results, function(index, value) {
       var o1 = "<div data-role='page' id='page" + index +"' data-title='Twitter Item " + index +"'>";
       var o2 = "<div data-role='header'><h1>Item " + index + "</h1></div>"; 
       var o3 = "<div data-role='content'><p>" + value.text + "</p>";
       var o4 = "<a href='#page" + (index - 1) + "' data-role='button' data-inline='true' data-icon='arrow-l'>Previous</a>";
       var o5 = "<a href='#page" + (index + 1) + "' data-role='button' data-inline='true' data-icon='arrow-r'>Next</a>";
       var o6 = "</div>";           
       var output = o1 + o2 + o3 + o4 + o5 + o6;  
       $('#target').append(output);
     });

    }); 
   $.mobile.changePage($("#page1"));
  };

  $(document).ready(loadtwitter);
 </script>
 </body>
</html>
4

1 に答える 1

1

jquery モバイルを使用している場合、$(document).ready に依存するべきではありません。jQuery docsから借用した以下のパターンを使用することをお勧めします。

$(document).bind( "pagebeforechange", function( e, data ) {
            loadtwitter();
            e.preventDefault();
        }
    }
});
于 2012-06-25T07:11:26.143 に答える