2

何度も試した結果、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

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 に答える