Jquery Strumento: Tenere scheda selezionata su Aggiorna o salvare i dati

Question

Sto usando jquery tool per scheda Ui,

Ora voglio scheda selezionata a pagina reload mantenere. C'è un modo per farlo? qui di seguito è il mio codice

$(function() { 
    // setup ul.tabs to work as tabs for each div directly under div.panes 
    $("ul.tabs").tabs("div.panes > div"); 
}); 

Answer 1

Ecco una semplice implementazione di memorizzare il cookie e il recupero è:

function getCookie(c_name) { 
    var i, x, y, ARRcookies = document.cookie.split(";"); 
    for (i = 0; i < ARRcookies.length; i++) { 
     x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 
     y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 
     x = x.replace(/^\s+|\s+$/g, ""); 
     if (x == c_name) { 
      return unescape(y); 
     } 
    } 
} 

function setCookie(c_name, value, exdays) { 
    var exdate = new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); 
    document.cookie = c_name + "=" + c_value; 
} 

Poi, per salvare/recuperare i dati dei cookie con jQuery UI Tabs:

$(function() { 
    // retrieve cookie value on page load 
    var $tabs = $('ul.tabs').tabs(); 
    $tabs.tabs('select', getCookie("selectedtab")); 

    // set cookie on tab select 
    $("ul.tabs").bind('tabsselect', function (event, ui) { 
     setCookie("selectedtab", ui.index + 1, 365); 
    }); 
}); 

Ovviamente, probabilmente si vorrà verificare se il cookie è impostato e restituire 0 o qualcosa in modo che getCookie non ritorni indefinito.

Nota a margine, il selettore di ul.tabs può essere migliorato specificando invece le schede per ID. Se hai veramente una raccolta di schede nella pagina, avrai bisogno di un modo migliore di memorizzare il cookie per nome: qualcosa di più specifico per quale raccolta di schede è stata selezionata/salvata.

UPDATE

Ok, ho fissato l'uso ui.index, ora salva con un incremento +1 all'indice tab.

Ecco un esempio di lavoro di questo in azione: http://jsbin.com/esukop/7/edit#preview

UPDATE per l'uso con jQuery Tools

Secondo l'jQuery Tools API, dovrebbe funzionare così:

$(function() { 
    //instantiate tabs object 
    $("ul.tabs").tabs("div.panes > div"); 

    // get handle to the api (must have been constructed before this call) 
    var api = $("ul.tabs").data("tabs"); 

    // set cookie when tabs are clicked 
    api.onClick(function(e, index) { 
      setCookie("selectedtab", index + 1, 365); 
    });  
    // retrieve cookie value on page load 
    var selectedTab = getCookie("selectedtab"); 

    if (selectedTab != "undefined") { 
    api.click(parseInt(selectedTab)); // must parse string to int for api to work 
    } 

}); 

function getCookie(c_name) { 
    var i, x, y, ARRcookies = document.cookie.split(";"); 
    for (i = 0; i < ARRcookies.length; i++) { 
     x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); 
     y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); 
     x = x.replace(/^\s+|\s+$/g, ""); 
     if (x == c_name) { 
      return unescape(y); 
     } 
    } 
} 

function setCookie(c_name, value, exdays) { 
    var exdate = new Date(); 
    exdate.setDate(exdate.getDate() + exdays); 
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString()); 
    document.cookie = c_name + "=" + c_value; 
} 

Ecco un esempio di lavoro (senza stile): http://jsbin.com/ixamig/12/edit#preview

Ecco quello che vedo in Firefox quando si ispeziona il cookie dall'esempio jsbin.com:

Answer 2

Il modo più semplice per sopravvivere fra le pagine di aggiornamento è quello di memorizzare la scheda ID selezionato in sessione o attraverso script server-side.

Solo i metodi per memorizzare i dati sul lato client sono: Cookies o localStorage.

Fare riferimento alla discussione: Store Javascript variable client side

Answer 3

Questo è ciò che ha funzionato per me ... almeno io non ho incontrato problemi ancora:

$('#tabs').tabs({ 
      select: function (event, ui) 
      { 
       $.cookie('active_tab', ui.index, { path: '/' }); 
      } 
     }); 
$('#tabs').tabs("option", "active", $.cookie('active_tab')); 

Sto usando: jQuery 1.8.2, jQuery UI 1.9.1, jQuery Cookie Plugin.

Ho impostato il "percorso" perché in C# ho impostato questo valore in un controller mvc che ha come valore predefinito "/". Se il percorso non corrisponde, non sovrascriverà il cookie esistente.Qui è il mio codice C# per impostare il valore dello stesso cookie utilizzato in precedenza:

Response.Cookies["active_tab"].Value = "myTabIndex"; 

Edit: Come di jQuery UI 1.10.2 (ho appena provato questa versione, non so se si è rotto nelle versioni precedenti), il mio metodo non funziona. Questo nuovo codice imposterà il cookie utilizzando jQuery UI 1.10.2

$('#tabs').tabs({ 
    activate: function (event, ui) { 
     $.cookie('active_tab', ui.newTab.index(), { path: '/' }); 
    } 
});