经过这么多试验,我终于设法使用PHP,JSON和AJAX动态创建页面并将它们加载到DOM中。但现在的问题是我无法动态调用/浏览这些页面,而是手动调用gallery.html#page1 ...etc
。
我在寻求指导而不是给你带来负担,因为我在这里学习。
** PHP - photos.php **
$photos = array();
$i=0;
while ($row = mysqli_fetch_array($query)){
$img = $row["fn"];
$photos[] = $img;
$i++;
}
$count = count($photos);
echo json_encode(array('status' => 'success', 'count' => $count, 'items' => $photos));
JSON数组
{
"status":"success",
"count":3,
"items":
[
"img1.jpg",
"img2.jpg",
"img3.jpg"
]
}
我使用以下方法来获取和存储所需图库的ID,
<input type="hidden" value="<?php echo $id; ?>" id="displayid" />
然后我回调它在AJAX中使用它。
var ID = $('#displayid').val();
AJAX和JQM
$.ajax({
Type: "GET",
url: 'photos.php',
data: { display: ID }, // = $('#displayid').val();
dataType: "json",
contentType: "application/json",
success: function(data) {
var count = data.count;
var number = 0;
$.each(data.items, function(i,item) {
var newPage = $("<div data-role=page data-url=page" + number + "><div data-role=header><h1>Photo " + number + "</h1></div><div data-role=content><img src=" + item + " /></div></div");
newPage.appendTo( $.mobile.pageContainer );
number++;
if (number == count) { $.mobile.changePage( newPage ); }; // it goes to last page
我从here获得此代码,感谢Gajotres在页面之间动态导航。它在同一个代码中。
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
}
}); // next button
}); // each loop
} // success
}); //ajax
答案 0 :(得分:1)
我找到了你的问题。
这部分代码不能像这样使用:
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
}
});
这就是问题所在。首先删除pagebeforeshow事件绑定,这里不能使用它。其余的代码不会做任何事情,因为目前有任何下一页(下一页将在下一次循环迭代期间生成),所以删除整个块。
现在,在每个块结束并生成所有页面之后(这是主要的,此时所有页面都应该存在),添加以下代码:
$('[data-role="page"]').each(function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$(this).find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'a'}).addClass('ui-btn-right').html('Next').button());
}
});
这将会发生。每个循环将循环遍历每个可用页面(我们现在都已经完成),如果不是最后一个,它将添加下一个按钮。
以下是一个实例:http://jsfiddle.net/Gajotres/Xjkvq/
好的,在这个示例页面已经存在,但点是相同的。它们需要存在(无论是否动态添加它们或者它们是否已存在),然后才能添加下一个按钮。
我希望这会有所帮助。