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

Question

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

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

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

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

Answer 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;
    })
});

Answer 2

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

Answer 3

更新：我发布的解决方案并没有解决我描述的问题^^如果我记得当我解决它时会再次发布。 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（由window.location.hash = val）的

Answer 4

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

Answer 5

我目前正在使用这个插件：qazxsw poi

Answer 6

jQuery http://flowplayer.org/tools/demos/tabs/ajax-history.htm插件就是这样做的。选项卡和历史/远程插件的创建者是同一个人，并让他们一起工作History/Remote。

Answer 7

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

here