jQuery UI 标签后退按钮历史记录
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/813601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Tabs back button history
提问by CesarHerrera
Has anyone been able to get jQuery UI Tabs 3(Latest version) working with the back button?
有没有人能够让 jQuery UI Tabs 3（最新版本）与后退按钮一起工作？
I mean if the user hits the back button they should go to the previously visited tab on the page, not a different page.
我的意思是，如果用户点击后退按钮，他们应该转到页面上先前访问过的选项卡，而不是其他页面。
The history plug in sounds like it can work, but i cant seem to make it work with ajax loaded tabs.
历史插件听起来可以工作，但我似乎不能让它与 ajax 加载的标签一起工作。
If anyone has managed to make this work, it would be deeply appreciated, thanks!
如果有人设法完成这项工作，将不胜感激，谢谢！
回答by Justin Hamade
I just ran into this as well. Its really easy with the jquery address plugin here http://www.asual.com/jquery/address/
我也刚碰到这个。在这里使用 jquery 地址插件真的很容易http://www.asual.com/jquery/address/
The demo for tabs seemed a bit over complicated. I just did this:
选项卡的演示似乎有点过于复杂。我只是这样做：
$('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;
})
});
回答by Garrett
I would suggest taking a look at this: http://www.asual.com/jquery/address/it allows you to do deep linking, along with your AJAX calls.
我建议看看这个：http: //www.asual.com/jquery/address/它允许你做深层链接，以及你的 AJAX 调用。
回答by drostin77
Update: The solution I posted does not fix the problem I described ^^ will post again if I remember when I solve it. Update2: I've "solved" the problem for now (see below).
更新：我发布的解决方案没有解决我描述的问题 ^^ 如果我记得我什么时候解决它会再次发布。更新2：我现在已经“解决”了这个问题（见下文）。
Question is a bit old, but if anyone stumbles on this question as I did, a quick change to the above solution by Justin Hamade might help some people.
问题有点老了，但是如果有人像我一样偶然发现了这个问题，那么 Justin Hamade 对上述解决方案的快速更改可能会对某些人有所帮助。
If you use Jquery Address' externalChange event instead of just "change" it prevents sending a superfluous request (in my case resulting in a error in the javascript console). This is because if someone clicks a tab the address changes on its own (thanks to jquery ui), thsi change triggers $.address.change once, which selects a tab even though jquery-ui has already done so... At least I think thats what was going on.
如果您使用 Jquery Address 的 externalChange 事件而不仅仅是“更改”，它会阻止发送多余的请求（在我的情况下会导致 javascript 控制台中的错误）。这是因为如果有人点击一个选项卡，地址会自行更改（感谢 jquery ui），这个更改会触发 $.address.change 一次，即使 jquery-ui 已经这样做了，它也会选择一个选项卡......至少我认为这就是发生的事情。
Also I did not like the tabs creating hashes like "#ui-tab-2", "#ui-tab-3" etc, so I used the following code which makes the urls use the names of the anchor elements as the hashes (i.e. "www.example.com#cool_stuff" instead of "www.example.com#ui-tab-2"):
此外，我不喜欢创建像“#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);
});
});
However, A) I'm new to jquery and not sure this is efficient / safe / "The Right Way To Do It", and B) Be sure to use this only if you can be sure the 'name' attribute of the anchors does not have any characters that are not URI safe (i.e. space).
但是，A）我是 jquery 的新手，不确定这是否有效/安全/“正确的方法”，并且 B）只有在您可以确定锚点的“名称”属性时才确保使用它没有任何不是 URI 安全的字符（即空格）。
Update2: I've "solved" the problem in Update1 for now, but it has the terribly ugly line:
更新 2：我现在已经“解决”了更新 1 中的问题，但它有非常丑陋的一行：
var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""
Because apparently the $.address.hash(val) function adds a "/#" after the first hash, but if we don't use the $.address.hash(val) then externalChange is triggered (by window.location.hash=val)
因为显然 $.address.hash(val) 函数在第一个散列之后添加了一个“/#”，但是如果我们不使用 $.address.hash(val) 然后 externalChange 被触发（通过 window.location.hash =val)
回答by FDisk
I'm curently using this plugin: http://flowplayer.org/tools/demos/tabs/ajax-history.htm
我目前正在使用这个插件：http://flowplayer.org/tools/demos/tabs/ajax-history.htm
回答by brianpeiris
It would appear that back button support is currently not built into the jQuery UI tabs: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking
看起来后退按钮支持目前没有内置到 jQuery UI 选项卡中：http: //jqueryui.com/demos/tabs/#Back_button_and_bookmarking
回答by karim79
The jQuery History/Remoteplugin does that. The creators of the Tabs and History/Remote plugins are the same person, and has them working together here.
jQuery History/Remote插件可以做到这一点。Tabs 和 History/Remote 插件的创建者是同一个人，他们在这里一起工作。
回答by Alexey Miloserdov
You can refer to the link of the button that opens the tab, and write it in history. After that add "EventListener" we trace with its help the change of "window.location.hash" and at any change we artificially press the button with such a link. Thus, the transitions in the history with the help of the back button will work.
您可以参考打开选项卡的按钮链接，并将其写入历史记录。在添加“EventListener”之后，我们在它的帮助下跟踪“window.location.hash”的变化，并且在任何变化时我们人为地按下带有这样链接的按钮。因此，在后退按钮的帮助下历史转换将起作用。
$(".btn").click(
function () {
window.location = this.href;
});
window.addEventListener('hashchange', function () {
var x = `[href="${window.location.hash}"]`;
$(x)[0].click();
});