jQuery UI 选项卡后退按钮历史记录答案

【问题标题】：jQuery UI Tabs back button historyjQuery UI 选项卡后退按钮历史记录
【发布时间】：2009-05-01 22:41:02
【问题描述】：

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

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

历史插件听起来可以工作，但我似乎无法让它工作 ajax 加载的标签页。

如果有人成功完成这项工作，将不胜感激，谢谢！

【问题讨论】：

标签： jquery user-interface tabs history back

【解决方案1】：

我也遇到了这个问题。在这里使用 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;
    })
});

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

我也不喜欢创建像“#ui-tab-2”、“#ui-tab-3”等哈希值的选项卡，所以我使用了以下代码，使网址使用锚元素的名称作为哈希（即“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）只有在您可以确定“名称”属性的情况下才确保使用它的锚点没有任何非 URI 安全的字符（即空格）。

Update2：我现在已经“解决”了 Update1 中的问题，但它有一条非常丑陋的线：

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

因为显然 $.address.hash(val) 函数在第一个哈希之后添加了一个“/#”，但是如果我们不使用 $.address.hash(val) 则会触发 externalChange（通过 window. location.hash=val)

【讨论】：

【解决方案4】：

目前看来，jQuery UI 选项卡中没有内置后退按钮支持： http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

【讨论】：

【解决方案5】：

我正在使用这个插件：http://flowplayer.org/tools/demos/tabs/ajax-history.htm

【讨论】：

【解决方案6】：

jQuery History/Remote 插件可以做到这一点。 Tabs 和 History/Remote 插件的创建者是同一个人，并让他们一起工作here。

【讨论】：

他这里用的版本是旧版本，我用的是第3版，抱歉，应该写进去了。
“这里”链接已损坏。给出“找不到对象！”

【解决方案7】：

您可以参考打开标签的按钮的链接，并将其写入历史记录。之后添加“EventListener” 我们在它的帮助下追踪“window.location.hash”的变化，并且在任何变化时我们人为地按下带有这样一个链接的按钮。因此，借助后退按钮的历史转换将起作用。

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

【讨论】：