Schede dell'interfaccia utente jQuery Cronologia dei pulsanti Indietro

Question

Qualcuno è riuscito a ottenere le schede dell'interfaccia utente jQuery 3 (Ultima versione) che funzionano con il pulsante Indietro?

Voglio dire che se l'utente preme il pulsante Indietro, dovrebbe andare alla scheda precedentemente visitata sulla pagina, non una pagina diversa.

Il plug-in della cronologia sembra funzionare, ma non riesco a farlo funzionare con le schede caricate ajax .

Se qualcuno è riuscito a fare questo lavoro, sarebbe molto apprezzato, grazie!

Answer 1

Suggerirei di dare un'occhiata a questo: http://www.asual.com/jquery/address/ consente di fare collegamenti profondi, insieme con le chiamate AJAX.

Answer 2

Sembrerebbe che sostegno per la schiena pulsante non è attualmente integrato nelle schede jQuery UI: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

Answer 3

Il jQuery plugin History/Remote fa. I creatori dei plug-in Tabs e History/Remote sono la stessa persona e li fa lavorare insieme here.

Answer 4

Mi sono imbattuto anche in questo. È davvero facile con il plugin per l'indirizzo jquery qui http://www.asual.com/jquery/address/

La demo per le schede sembrava un po 'complicata. Ho appena fatto questo:

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

sto curently utilizzando questo plugin: http://flowplayer.org/tools/demos/tabs/ajax-history.htm

Answer 6

Update: La soluzione che ho postato non risolve il problema che ho descritto ^^ pubblicheremo di nuovo se mi ricordo quando ho risolto . Update2: Ho "risolto" il problema per ora (vedi sotto).

La domanda è un po 'vecchia, ma se qualcuno si imbatte in questa domanda come ho fatto io, una rapida modifica alla soluzione di cui sopra di Justin Hamade potrebbe aiutare alcune persone.

Se si utilizza l'indirizzo di Jquery 'externalchange invece di solo "change" impedisce l'invio di una richiesta superflua (nel mio caso si verifica un errore nella console javascript). Questo perché se qualcuno fa clic su una scheda l'indirizzo cambia da solo (grazie a jquery ui), la modifica attiva $ .address.change una volta, che seleziona una scheda anche se jquery-ui lo ha già fatto ... Almeno io pensa quello che stava succedendo.

Inoltre, non mi piacevano le schede che creavano hash come "# ui-tab-2", "# ui-tab-3" ecc, quindi ho usato il seguente codice che rende gli url utilizzare i nomi degli elementi di ancoraggio come gli hash (vale a dire "www.example.com # cool_stuff" invece di "www.example.com # ui-scheda-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); 
    }); 

}); 

Tuttavia, a) sono nuovo di jQuery e non sicuro che questo sia efficiente/sicuro/"Il modo giusto di farlo", e B) Assicurati di usarlo solo se puoi essere sicuro che l'attributo "nome" degli ancore non ha caratteri che non sono sicuri per l'URI (es. spazio).

Update2: Ho "risolto" il problema in Update1 per ora, ma ha il terribilmente brutto linea:

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

Perché a quanto pare la funzione di $ .address.hash (val) aggiunge un "/ # "dopo il primo hash, ma se non si usa $ .address.hash (val) then externalChange viene attivato (da window.location.hash = val)