33

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

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

历史插件听起来好像可以工作，但我似乎无法让它与 ajax 加载的选项卡一起工作。

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

4

7 回答 7

38

我也遇到了这个。在这里使用 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;
    })
});
于 2010-07-25T20:40:56.940 回答
9

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

于 2009-05-01T22:50:51.830 回答
3

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

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

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

此外，我不喜欢创建像“#ui-tab-2”、“#ui-tab-3”等哈希值的选项卡，所以我使用以下代码使 url 使用锚元素的名称作为哈希值（即“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)

于 2011-02-26T04:39:14.253 回答
2

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

于 2009-05-01T22:59:47.800 回答
2

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

于 2010-09-27T09:16:00.893 回答
1

jQuery History/Remote插件就是这样做的。选项卡和历史/远程插件的创建者是同一个人，并让他们在这里一起工作。

于 2009-05-01T23:19:34.133 回答
0

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

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

于 2019-02-14T14:47:46.603 回答