1

我正在学习 JQuery mobile 并帮助我走上我正在寻找示例问题解决方案的道路。我想遍历 JSON 查询以在单个 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 mobile，则不应依赖 $(document).ready。您最好使用从jQuery docs借来的以下模式。

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