jQuery UI Tabs後退按鈕歷史

Question

有沒有人能夠獲得jQuery UI Tabs 3（最新版本）與後退按鈕一起工作？

我的意思是如果用戶點擊後退按鈕，他們應該去頁面上以前訪問過的標籤，而不是一個不同的頁面。

歷史插件聽起來像它可以工作，但我似乎無法使它與 ajax加載標籤。

如果有人設法使這項工作，它將深表感謝，謝謝！

Answer 1

我建議看看這個： http://www.asual.com/jquery/address/它允許你做深度鏈接，以及你的AJAX調用。

Answer 2

這樣看來，後退按鈕的支持，目前沒有內置到jQuery用戶界面標籤： http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

Answer 3

jQuery的History/Remote插件做到這一點。 Tabs和History/Remote插件的創建者是同一個人，並且他們一起工作here。

Answer 4

我剛剛遇到了這個問題。它真的很容易與這裏的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 5

我curently使用這個插件：http://flowplayer.org/tools/demos/tabs/ajax-history.htm

Answer 6

更新：我張貼不解決我描述的，如果我還記得，當我解決吧^^將再次發佈該問題的解決方案。 Update2：我現在已經「解決」了這個問題（見下文）。

問題有點老，但如果有人像我一樣在這個問題上磕磕絆絆，Justin Hamade對上述解決方案的快速改變可能會幫助一些人。

如果你使用jQuery地址externalChange事件，而不是僅僅是‘改變’它可以防止發送一個多餘的請求（在我的情況導致的JavaScript控制檯中的錯誤）。這是因爲，如果有人點擊選項卡上自己的（感謝jQuery用戶界面）的地址發生變化，thsi變化觸發$ .address.change一次，它選擇即使jQuery的UI已經做了選項卡，以便......至少我想想那是怎麼回事。

此外，我不喜歡創建像「＃ui-tab-2」，「＃ui-tab-3」等哈希標籤，所以我使用了下面的代碼，這使得urls使用錨元素的名稱作爲哈希值（即 「www.example.com＃cool_stuff」，而不是 「www.example.com＃UI標籤-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）功能增加了一個「/ ＃」第一哈希後，但如果我們不使用$。地址。哈希（val）然後externalChange被觸發（通過window.location.hash = val）