web-dev-qa-db-ja.com

jQuery UIタブの戻るボタンの履歴

誰かがjQuery UI Tabs 3（最新バージョン）を戻るボタンで機能させることができましたか？

つまり、ユーザーが戻るボタンを押した場合、別のページではなく、以前にアクセスしたページのタブに移動する必要があります。

履歴プラグインは機能するように聞こえますが、ajaxでロードされたタブで機能するようには思えません。

誰かがこの作業を成功させることができたなら、深く感謝します、ありがとう！

jqueryuser-interfacetabshistoryback
33
CesarHerrera

私もこれに遭遇しました。ここでjqueryアドレスプラグインを使うと本当に簡単です http://www.asual.com/jquery/address/

タブのデモは少し複雑に見えました。私はこれをやった：

$('document').ready(function() {
    // For forward and back
    $.address.change(function(event){
      $("#tabs").tabs( "select" , window.location.hash )
    })

    // when the tab is selected update the url with the hash
    $("#tabs").bind("tabsselect", function(event, ui) { 
      window.location.hash = ui.tab.hash;
    })
});
38
Justin Hamade

これを見てみることをお勧めします： http://www.asual.com/jquery/address/ これにより、AJAXと共に、ディープリンクを行うことができます=呼び出し。

9
Garrett

更新：私が投稿したソリューションは、私が説明した問題を修正しません。^^解決したときに覚えていれば、再度投稿します。 Update2：私は今のところ問題を「解決」しています（以下を参照）。

質問は少し古いですが、私と同じように誰かがこの質問に出くわした場合、Justin Hamadeによる上記の解決策をすばやく変更すると、一部の人に役立つことがあります。

「変更」の代わりにJquery AddressのexternalChangeイベントを使用すると、余分なリクエストが送信されなくなります（私の場合、JavaScriptコンソールでエラーが発生します）。これは、誰かがタブをクリックすると、アドレスが自動的に変更されるため（jquery uiのおかげ）、この変更によって$ .address.changeが1回トリガーされ、jquery-uiがすでにそうしているにもかかわらずタブが選択されるためです...少なくとも私はそれが起こっていたと思います。

また、「＃ui-tab-2」、「＃ui-tab-3」などのハッシュを作成するタブが好きではなかったため、URLにアンカー要素の名前をハッシュとして使用させる次のコードを使用しました（つまり、「www.example.com＃ui-tab-2」ではなく「www.example.com＃cool_stuff」）：

$(function() {
  $( "#tabs" ).tabs({
    cache: false,
  });

  // For forward and back
  $.address.externalChange(function(event){
    var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""
    $("#tabs").tabs( "select" , $("#tabs a[name="+ name + "]").attr('href') )
  });
  // when the tab is selected update the url with the hash
  $("#tabs").bind("tabsselect", function(event, ui) { 
    $.address.hash(ui.tab.name);
  });

});

ただし、A）私はjqueryを使い始めたばかりであり、これが効率的/安全であるかどうかはわかりません。「正しい方法」B）アンカーの「名前」属性が確実である場合にのみ使用してください。 URIセーフではない文字（スペース）はありません。

Update2：今のところUpdate1で問題を「解決」しましたが、ひどく醜い行があります：

var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""

明らかに$ .address.hash（val）関数は最初のハッシュの後に「/＃」を追加しますが、$。address.hash（val）を使用しない場合、externalChangeがトリガーされます（window.location.hashによって） = val）

3
drostin77

私は現在このプラグインを使用しています： http://flowplayer.org/tools/demos/tabs/ajax-history.htm

2
FDisk

現在、戻るボタンのサポートはjQuery UIタブに組み込まれていないようです： http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

2
brianpeiris

JQuery History/Remote プラグインがそれを行います。タブと履歴/リモートプラグインの作成者は同じ人物であり、それらを一緒に使用しています ここ 。

1
karim79

タブを開くボタンのリンクを参照して履歴に書き込むことができます。その後、「EventListener」を追加し、その助けを借りて「window.location.hash」の変更を追跡します。変更がある場合は、そのようなリンクのあるボタンを人工的に押します。したがって、[戻る]ボタンを使用した履歴の遷移が機能します。

$(".btn").click(
        function () {
            window.location = this.href;
        });
    window.addEventListener('hashchange', function () {
        var x = `[href="${window.location.hash}"]`;
        $(x)[0].click();
    });
0
Alexey Miloserdov