2

经过这么多尝试，我终于设法使用 PHP、JSON 和 AJAX 动态创建页面并将它们加载到 DOM 中。但现在的问题是我无法动态调用/导航这些页面，而是手动，即gallery.html#page1 ...etc.

我寻求指导而不是加重你的负担，因为我是来这里学习的。

**PHP -照片.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

我从这里得到了这段代码，感谢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
4

1 回答 1

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/

好的，在此示例中页面已经存在，但要点是相同的。在添加下一个按钮之前，它们需要存在（无论是动态添加还是预先存在）。

我希望这有帮助。

于 2013-03-01T19:07:24.433 回答