我正在尝试在详细信息页面中添加“下一步”按钮以进入下一个详细信息页面。我是jqm的新手。有可能这样做吗?有没有办法加载下一页的详细信息?在每次页面加载时请求 json 数据可能是一个解决方案,但这不是一个好方法。
任何解决方案都会有所帮助。
谢谢。这是html:
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<h3>
Movie List
</h3>
</div>
<div data-role="content">
<div class="example-wrapper" data-iscroll>
<ul data-role="listview" id="movie-list" data-theme="a">
</ul>
</div>
</div>
<div data-theme="a" data-role="footer">
<h1>Copyright 2013</h1>
</div>
</div>
<div data-role="page" id="headline">
<div data-theme="a" data-role="header">
<a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a>
<h3>
Movie Info
</h3>
</div>
<div data-role="content">
<ul data-role="listview" id="movie-data" data-theme="a">
</ul>
</div>
</div>
这是javascript:
$(document).on('pagebeforeshow', '#headline', function(){
$('#movie-data').empty();
$.each(movieInfo.result, function(i, row) {
if(row.id == movieInfo.id) {
$('#movie-data').append('<li><img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"></li>');
$('#movie-data').append('<li>Title: '+row.original_title+'</li>');
$('#movie-data').append('<li>Release date'+row.release_date+'</li>');
$('#movie-data').append('<li>Popularity : '+row.popularity+'</li>');
$('#movie-data').append('<li>Popularity : '+row.vote_average+'</li>');
$('#movie-data').listview('refresh');
}
});
});
$(document).on('vclick', '#movie-list li a', function(){
movieInfo.id = $(this).attr('data-id');
$.mobile.changePage( "#headline", { transition: "slide", changeHash: false });
});
var movieInfo = {
id : null,
result : null
}
var ajax = {
parseJSONP:function(result){
movieInfo.result = result.results;
$.each(result.results, function(i, row) {
console.log(JSON.stringify(row));
$('#movie-list').append('<li><a href="" data-id="' + row.id + '"><img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/><h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
});
$('#movie-list').listview('refresh');
}
}