it-swarm.com.de

jQuery-UI-Registerkarten Zurück zur Schaltfläche

Hat jemand jQuery UI Tabs 3 (Latest version) mit der Zurück-Taste arbeiten können?

Ich meine, wenn der Benutzer den Zurück-Button drückt, sollte er zu der zuvor besuchten Registerkarte auf der Seite gehen, nicht zu einer anderen Seite.

Das History-Plug-In klingt so, als könnte es funktionieren, aber es scheint nicht, dass es mit Ajax geladenen Registerkarten funktioniert.

Wenn es jemandem gelungen ist, diese Arbeit zu machen, wäre es sehr dankbar, danke!

33
CesarHerrera

Ich bin auch nur darauf gestoßen. Es ist wirklich einfach mit dem Jquery-Adress-Plugin hier http://www.asual.com/jquery/address/

Die Demo für Tabs war etwas kompliziert. Ich habe das gerade gemacht:

$('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;
    })
});
38
Justin Hamade

Ich würde vorschlagen, einen Blick auf das Folgende zu werfen: http://www.asual.com/jquery/address/ erlaubt Ihnen tiefe Verknüpfungen zusammen mit Ihrem AJAX Anrufe.

9
Garrett

Update: Die Lösung, die ich geschrieben habe, behebt das von mir beschriebene Problem nicht. ^^ wird erneut posten, wenn ich mich erinnere, wenn ich es löse. Update2: Ich habe das Problem vorerst "gelöst" (siehe unten).

Die Frage ist ein bisschen alt, aber wenn jemand wie ich auf diese Frage stößt, könnte eine schnelle Änderung der obigen Lösung durch Justin Hamade einigen Leuten helfen.

Wenn Sie das externalChange -Ereignis von Jquery Address anstelle von "change" verwenden, wird das Senden einer überflüssigen Anforderung verhindert (in meinem Fall führt dies zu einem Fehler in der Javascript-Konsole). Dies liegt daran, dass, wenn jemand auf einen Tab klickt, die Adresse sich von selbst ändert (dank jquery ui), die Änderung einmalig $ adress.change auslöst, was einen Tab auswählt, obwohl jquery-ui dies bereits getan hat ... Zumindest ich denke, das war was los war.

Ich mochte die Tabs nicht, die Hashes wie "# ui-tab-2", "# ui-tab-3" usw. erstellen, und so verwendete ich den folgenden Code, der dazu führt, dass die URLs die Namen der Ankerelemente als Hashes verwenden ( dh "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);
  });

});

A) Ich bin neu bei Jquery und bin mir nicht sicher, ob dies effizient/sicher ist/"Der richtige Weg, um es zu tun", und B) Verwenden Sie diese Option nur dann, wenn Sie das Attribut "Name" der Anker sicher sein können hat keine Zeichen, die nicht URI-sicher sind (dh Leerzeichen).

Update2: Ich habe das Problem in Update1 vorerst "gelöst", aber es hat die furchtbar hässliche Zeile:

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

Anscheinend fügt die $ .address.hash (val) -Funktion nach dem ersten Hash ein "/ #" hinzu, aber wenn wir nicht die $ .address.hash (val) verwenden, wird externalChange (von window.location.hash) ausgelöst = val)

3
drostin77
2
FDisk

Es scheint, dass die Unterstützung für die Zurück-Schaltfläche derzeit nicht in die Registerkarten der jQuery-Benutzeroberfläche integriert ist: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

2
brianpeiris

Das jQuery History/Remote plugin macht das. Die Ersteller der Registerkarten "Tabs" und "History/Remote" sind dieselbe Person und müssen zusammenarbeiten hier .

1
karim79

Sie können auf den Link der Schaltfläche, die die Registerkarte öffnet, verweisen und sie in die Historie schreiben. Danach fügen Sie "EventListener" Hinzu und verfolgen mit ihrer Hilfe die Änderung von "window.location.hash" "und bei jeder Änderung drücken wir den Button mit einem solchen Link künstlich. So werden die Übergänge in der Historie mit Hilfe der Zurück-Taste funktionieren.

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

0