1

この例に従って、jQueryを使用して動的ページを読み込もうとしています。

（編集）：コンテキストのより良いビューを提供するためにコードを更新しました

これがコードサンプルです

<div data-role="page" id="pageSample">
    <div data-role="header">title</div>
    <div data-role="content">
        <a href="#home" data-role="button" data-transition="slide" data-direction='reverse'>Home</a>
    </div>
    <div data-role="footer">Footer</div>
</div>

$(document).bind( "pagebeforechange", function( e, data ) {
    // Generate dynamic content of targeted pages...
    $.mobile.changePage($(page), {
        transition:"slide",
        dataUrl:url,
        reverse:reverse
    });
});

戻るボタンは動的に生成される場合とされない場合があります（このスニペットなど）。changePageどちらの場合も、によってトリガーされるため、逆方向には機能しませんpagebeforechange。したがって、オプションにreverse変数を挿入しました。changePage()

クリックしたアイテムのデータ方向の値を取得する方法が見つかりません。私は直前にこれを試しましたchangePage()：

reverse = false;
$('a[data-direction="reverse"]').on("click", function(){
    reverse = true;
});

ただし、reverse値はで更新されませんchangePage()。両方のコードが同期して実行されていると思います。reverseの値を更新する方法はありchangePage()ますか？

4

1 に答える 1

2

最終更新

私たちの議論とあなたの例によるとhttp://jsfiddle.net/Iris/UZBhx/21/

これを変える

$('a').on("click", function()

に

$(document).on("click", 'a', function()

別の更新

をバインドする$.mobile.changePageと、pagebeforechangeすべてのコードが2回トリガーされます。reverseしたがって、コマンドが最初に実行されるときに、の値が失われるか、無視されます。

以下のようにバインドしてみてくださいpagebeforehide。

$(document).bind( 'pagebeforehide', '[data-role="page"]#PageId', function( e, data ) {

// Generate dynamic content of targeted pages...

  $.mobile.changePage($(page), {
   transition:"slide",
   dataUrl:url,
   reverse:reverse
  });
});

アップデート

特定のボタンに逆効果を使用するには、この方法に従うことができます。

まず、逆効果のボタンにクラスを割り当てます。たとえばui-reverse、以下のスクリプトを追加します。

$(document).on('click', '[data-role='button'].ui-reverse', function() {
 $.mobile.changePage( url, {
  transition:"slide",
  reverse: true, 
  dataUrl:url
 });  
});

「戻る」ボタンのリンク-JqueryMobile

data-direction="reverse"

data-rel = "back"を使用すると、リンクがブラウザの戻るボタンと機能的に同等になり、すべての標準の戻るボタンロジックが適用されますが、そのページの変更で実行されるトランジションの逆方向バージョンを実行することを目的としています。

data-rel="back"

これは戻るボタンを模倣し、1つの履歴エントリに戻り、アンカーのデフォルトのhrefを無視します。

data-direction="reverse"を使用してリンクを追加しても、data-rel="back"ページの反転遷移が元に戻されたり、遷移の「通常の」バージョンが生成されたりすることはありません。

あなたの場合、遷移を逆にしたい場合は、以下のコードを使用してください。

$.mobile.changePage($(page), {
 transition:"slide",
 reverse: true, // this will reverse the affect of the transition used in the page.
 dataUrl:url
});

詳しくはこちらをご覧ください。

于 2013-03-12T18:02:13.833 に答える