3

さまざまなアクション中に制御しようとしているモーダルボックス（Twitter Bootstrap）があります。

  1. ユーザーがリンクをクリックすると、モーダルボックスが表示され、（プッシュステート）URLが変更されます。
  2. ユーザーがモーダルボックスを非表示にする>URLを前のページに変更します。
  3. ユーザーが戻るボタンをクリック>モーダルボックスを非表示にすると、URLが前のページに変わります。
  4. ユーザーが進むボタンをクリックすると、モーダルボックスが表示され、URLが変更されます（プッシュステート）。

私の主な問題は、アイテム＃3と＃4です。ブラウザの戻る/進むボタンを使用する場合、モーダルを切り替える必要があります（URLが変更されます）

アクション＃1と＃2のみを機能させる現在のコードは次のとおりです。

$(function(){
$(".thumbnail a").live("click", function(){
    msgurl = $(this).attr("href");
    msgid = $(this).attr("data-id");
    history.pushState(null, null, msgurl);

    $.ajax({
        ....
    });
    $("#newmodal").modal({ dynamic: true });
     return false;
});
$('#newmodal').bind('hidden', function () {
    history.back();
})
});

history.jsなどの履歴ライブラリを使用して戻る/進むボタン制御を実現する方法はありますか？コードにどのように実装しますか？

4

1 に答える 1

6

私は実際に非常に似たようなことをしようとしてきました…</p>

これまでのところ、すべてのポイント (1-4) で成功していますが、HTML4 ブラウザーがよりクリーンなリンクを表示する方法に取り組んでいます (history.js を使用すると、醜いhttp://domain.org/が生成されます)。 page/page#-http://domain.org/modalリンクできないページ)。

作業を行うためのヒントを次に示します。

必ず onpopstate イベントにバインドしてください。このようにして、ブラウザの進むボタンと戻るボタンをキャプチャして、何をすべきかを理解できます。

window.onpopstate = function(e) {
var State = e.state;
if (!State) { //i.e., we've gone to the history context (no active state)
    $('#modal').modal('hide');
}
else {//Re-open state modal
    var modalURL = State.URL.substring(State.URL.indexOf('?show=')+6);
    openModal(appRoot+modalURL, State);
}
}

前の状態オブジェクトにアクセスできないため (または少なくとも方法が見つからないため)、onpopstate 関数は完全ではありません。そのため、変数を URL に追加することをお勧めします。私の例では、URL に '?show=relativeModalLink/' が追加されているので、モーダルが開かれたページがわかります。このように、サーバー側のコードを使用して show URL 変数が渡されたかどうかを検出し、ユーザーをモーダル ページに誘導するか、メイン ページに戻してモーダルを開く (好みの問題) こともできます。

状態が null かどうかを確認する理由は、ページをロードすると、ブラウザーが実際に状態を持ち、それが null になるためです。したがって、 null はモーダルの不在と見なすことができます。

モーダルを開くときは、次のようにします。

function openModal(modalLink, state) {    
if (state === undefined) {
       var shortLink = modalLink.substring(modalLink.indexOf(appRoot)+appRoot.length);
       var stateLink = document.location.href.indexOf('?show=') === -1 ? document.location.href+'?show='+shortLink : document.location.href;
       history.pushState({'type': 'modal','URL':stateLink},'',stateLink);
    }
}

ユーザーが進むボタンを使用して既存のモーダル状態に移動した場合に別の状態をプッシュしたくないため、状態を open モーダル関数に渡したことに注意してください。

これは私の実装に少し固有のものであるため、リンク システムは少し異なる場合があります。

また、もう 1 つ注意点があります。window.history.back() 関数をブートストラップの閉じるボタンに直接バインドしてください (ブートストラップの「非表示」モーダル関数内に配置しないでください)。このように、ユーザーが戻るボタンを押しても、コード内でページが 2 回戻ることはありません (onpopstate 関数で .modal('hide') を呼び出すため)。戻るボタンが押されたかどうか、またはブートストラップの「非表示」機能内から閉じるボタンでモーダルが閉じられたかどうかを検出する方法をまだ見つけていません (実際、それが可能だとは思いません…)。

history.js を実装するには、ページにスクリプトを含めるだけです。HTML5 ブラウザーでは無視され、HTML4 ブラウザーでは上記のコードで問題なく動作するようです (前述の見苦しい URL の問題を除いて)。history.js ドキュメントの実装手順は異なりますが、ページの「ajax化」はモーダルの状況とは少し異なります。

お役に立てれば！

于 2012-12-01T22:15:24.273 に答える