Question

有没有人能够使用后退按钮获得jQuery UI Tabs 3（最新版本）？

我的意思是如果用户点击后退按钮，他们应该转到页面上之前访问过的标签页，而不是另一页。

历史插件听起来像它可以工作，但我似乎无法使其工作 ajax加载了标签。

如果有人设法完成这项工作，我们将非常感谢，谢谢！

Answer 1

我建议看看这个： http://www.asual.com/jquery/address/它允许您与AJAX调用一起进行深度链接。

Answer 2

更新：我发布的解决方案并没有解决我所描述的问题^^如果我记得当我解决它时会再次发布。 Update2：我现在已“解决”了这个问题（见下文）。

问题有点陈旧，但如果有人像我一样偶然发现这个问题，Justin Hamade对上述解决方案的快速修改可能对某些人有所帮助。

如果您使用Jquery Address'externalChange事件而不仅仅是“更改”它会阻止发送多余的请求（在我的情况下导致javascript控制台中的错误）。这是因为如果有人单击一个选项卡，地址会自行更改（感谢jquery ui），那么更改会触发$ .address.change一次，这会选择一个选项卡，即使jquery-ui已经这样做了...至少我想想那是怎么回事。

此外，我不喜欢创建哈希的标签，如“＃ui-tab-2”，“＃ui-tab-3”等，所以我使用了以下代码，这使得urls使用锚元素的名称作为哈希（即“www.example.com＃cool_stuff”而不是“www.example.com＃ui-tab-2”）：

$(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）只有在你确定'name'属性时才一定要使用它锚点没有任何不安全的URI（即空格）。

Update2：我现在已经“解决”了Update1中的问题，但它有一条非常难看的界限：

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

因为显然$ .address.hash（val）函数在第一个哈希之后添加了一个“/＃”，但是如果我们不使用$ .address.hash（val）那么就会触发externalChange（通过窗口。的location.hash = val）的

Answer 3

似乎后面的按钮支持当前没有内置到jQuery UI选项卡中： http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

Answer 4

我目前正在使用此插件：{{3p>

Answer 5

jQuery History/Remote插件可以做到这一点。选项卡和历史记录/远程插件的创建者是同一个人，并让他们一起工作here。

Answer 6

您可以参考用于打开选项卡的按钮的链接，并将其写入历史记录。之后，添加“ EventListener” 我们借助它的帮助来跟踪“ window.location.hash”的更改，并在更改时人为地按下带有此类链接的按钮。因此，借助后退按钮，历史记录中的过渡将起作用。

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

jQuery UI选中后退按钮历史记录

7 个答案: