jQuery UI Registerkarten zurück Taste Geschichte

Question

Hat jemand in der Lage, jQuery UI Tabs 3 (Neueste Version) mit der Zurück-Taste arbeiten?

Ich meine, wenn der Benutzer die Zurück-Taste drückt, sollten sie zum zuvor besuchten Tab auf der Seite gehen, nicht auf einer anderen Seite.

Die Geschichte Plug-in klingt wie es funktionieren kann, aber ich kann nicht scheinen, es mit Ajax geladenen Tabs arbeiten.

Wenn jemand geschafft hat, dies zu arbeiten, wäre es sehr dankbar, danke!

Answer 1

Ich würde vorschlagen, einen Blick auf diese: http://www.asual.com/jquery/address/ es ermöglicht Ihnen, Deep-Linking, zusammen mit Ihren AJAX-Anrufe zu tun.

Answer 2

Es scheint, dass Knopfauflager zurück zur Zeit in die jQuery UI Tabs nicht gebaut wird: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

Answer 3

Das jQuery-Plugin History/Remote das tut. Die Ersteller der Tabs und History/Remote-Plugins sind dieselbe Person und lassen sie zusammenarbeiten here.

Answer 4

Ich lief gerade auch in diese. Es ist wirklich einfach mit dem Jquery Adresse Plugin hier http://www.asual.com/jquery/address/

Die Demo für Tabs schien ein bisschen zu kompliziert. Ich habe gerade dies:

$('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

Ich verwende curently dieses Plugin: http://flowplayer.org/tools/demos/tabs/ajax-history.htm

Answer 6

Update: Die Lösung, die ich geschrieben das Problem nicht beheben, die ich beschrieben ^^ werde nach wieder, wenn ich erinnere mich, als ich es lösen . Update2: Ich habe das Problem für jetzt gelöst (siehe unten).

Frage ist ein bisschen alt, aber wenn jemand auf diese Frage stößt wie ich, könnte ein schneller Wechsel zu der obigen Lösung von Justin Hamade einigen Menschen helfen.

Wenn Sie Jquery Address 'externalChange-Ereignis statt nur "change" verwenden, verhindert es das Senden einer überflüssigen Anfrage (in meinem Fall führte dies zu einem Fehler in der Javascript-Konsole). Dies ist so, weil, wenn jemand auf einen Tab klickt, die Adresse sich selbst ändert (dank jquery ui), diese Änderung triggert $ .address.change einmal, was eine Registerkarte auswählt, obwohl jquery-ui dies bereits getan hat ... Zumindest ich denke, das ist was los ist.

Auch mochte ich nicht die Tabs erstellen Hashes wie "# ui-tab-2", "# ui-tab-3" usw., so habe ich den folgenden Code verwendet, der die URLs die Namen der Ankerelemente verwendet wie die Hash-Werte (zB "www.example.com # cool_stuff" anstelle von "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); 
    }); 

}); 

jedoch A) ich bin neu in jquery und nicht Sicher, das ist effizient/sicher/"Der richtige Weg, es zu tun", und B) sicher sein, nur diese zu verwenden, wenn Sie sicher sein können, dass das 'Name' Attribut der Anker keine Zeichen hat, die nicht URI sicher sind Raum).

Update2: Ich habe "gelöst", das Problem in Update1 für jetzt, aber es hat die schrecklich hässlich Linie:

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

Weil offenbar der $ .address.hash (val) Funktion fügt ein „/ # "nach dem ersten Hash, aber wenn wir nicht die $ .Adresse verwenden.hash (val) then externalChange wird ausgelöst (von window.location.hash = val)