1

私はJquery/Jquery Mobileに非常に慣れていません。jqueryを使用して前のページを動的に取得しようとしています。私は試しましたが、正しく機能していないので、誰でもこの問題を解決できます。

フィドルの私のコード

ボタンをクリックするNext & Prevと、最初は正常に機能しますが、もう一度同じことを行うと、「前へ」ボタンは正常に機能します「次へ」ボタンは機能せず、自動的に次のリンクとファイルに移動します初めてロードされていません。

誰かがこれを適切に機能させるのを手伝ってくれますか?

前もって感謝します。

更新された質問:

タイルもグリッド ビューに似ていますが、タイルはグリッドとは多少異なります。

この図はこのようなグリッド ビューのみですが、タイルでは一度にすべてのタイトルを表示するわけではありません。

例: この画像には、グリッド ビューを使用してここに A から F のタイトルがあると考えてください。タイルにも同じように、A から F のタイトルがあると考えてください。タイトルは画面サイズによって異なります。A から F までのタイトルが複数ある場合は、"1 つのボタン" があり、そのボタンに所有しているタイトルの数が表示されます。これをクリックすると、残りの他のタイトルを開く必要があります。

4

3 に答える 3

2

前のページと次のページの ID を$.mobile.changePage()取得して、を使用してページ間を移動します。[data-role=page].prev().next()

デモ

ページを動的に作成する

$(document).on('pageshow', '#chapter', function () {
 var length = $('#chapter [data-role=listview] li a').length;
 $('#chapter [data-role=listview] li a').each(function (i) {
  var file = $(this).attr('file');
  var content = $(this).text();
  var seq = $(this).data('sequence');
  if ($('[data-role=page]#' + seq).length === 0) {
   $($.mobile.pageContainer).append('<div data-role="page" id="' + seq + '" class="listitems"><div data-role="header"><a href="#" data-role="button" class="prev" data-icon="arrow-l">Prev</a><h1 id="header2">' + content + '</h1><a href="#" data-role="button" class="next" data-icon="arrow-r">Next</a></div><div data-role="content"></div><div data-role="footer" data-position="fixed"><a href="#home" data-role="button" data-icon="home" data-iconpos="notext"></a></div></div>');
   $('[data-role=page]#' + seq + ' [data-role=content]').load(file);
   if (i === 0) {
    $('[data-role=page]#' + seq).addClass('first');
   }
   if (length == (i + 1)) {
    $('[data-role=page]#' + seq).addClass('last');
   }
  }
 });
});


$(document).on('click', '#chapter [data-role=listview] li a', function () {
 var goto = '#' + $(this).data('sequence');
 $.mobile.changePage(goto);
});

ナビゲーション

// Next page
$(document).on('click', '.next', function () {
 var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id;
 $.mobile.changePage(next, {
    transition: 'slide'
 });
});

// Previous page
$(document).on('click', '.prev', function () {
 var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id;
 $.mobile.changePage(prev, {
    transition: 'slide',
    reverse: true
 });
});

ナビゲーション ボタンの表示/非表示

$(document).on('pagebeforeshow', '[data-role=page].listitems', function () {
 if ($(this).hasClass('first')) {
  $('.prev').hide();
  $('.next').show();
 } 
 else if ($(this).hasClass('last')) {
  $('.prev').show();
  $('.next').hide();
 }
 else {
  $('.next, .prev').show();
 }
});
于 2013-05-15T07:47:22.753 に答える
-1

これは機能します。:)

<a href="#" data-rel="back" data-role="button">Go back</a>
于 2013-05-15T06:17:39.913 に答える