Question

我正在学习JQuery mobile并帮助我走上正在寻找示例问题解决方案的道路。我想迭代一个JSON查询，在一个HTML页面中动态创建多个页面（参见multipage 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>

Answer 1

如果您使用的是jquery mobile，则不应该依赖$（document）.ready。你最好使用从jQuery docs借来的以下模式。

$(document).bind( "pagebeforechange", function( e, data ) {
            loadtwitter();
            e.preventDefault();
        }
    }
});

迭代JSON以动态创建多个JQuery Mobile Pages

1 个答案: