le tabs ui jquery non supportano più i cookie? ora cosa?

Mi scuso perché questa è una domanda a risposta aperta, ma sono in perdita.

Dalla versione 1.9 dell’interfaccia utente di jquery, sono stati ammortizzati utilizzando l’opzione cookie per salvare lo stato attivo delle tabs su più pagine. http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

Non ho visto NESSUN’altra documentazione là fuori su come realizzare questo ora! Quindi sono rimasto a grattarmi la testa.

La mia ipotesi migliore sarebbe quella di utilizzare un qualche tipo di event per creare un cookie, quindi caricare il cookie? O c’è qualche altro modo per salvare lo stato attivo delle tabs su più pagine e per preferenza dell’utente?

    Lo stesso problema mi ha morso oggi. Ecco cosa sembra funzionare:

    1. Utilizza il plug-in jquery.cookie ( https://github.com/carhartl/jquery-cookie ) (Questo passaggio non è necessario, ma semplifica la gestione dei cookie)
    2. Utilizzare il seguente frammento di codice:

       $( ".selector" ).tabs({ active : $.cookie('activetab'), activate : function( event, ui ){ $.cookie( 'activetab', ui.newTab.index(),{ expires : 10 }); } }); 

    Questo imposta un cookie chiamato “activetab” che scade dopo 10 giorni (fare riferimento alla documentazione di jquery.cookie per ulteriori opzioni) per ricordare la scheda attualmente selezionata ogni volta che si fa clic su una qualsiasi scheda. Questo cookie viene letto al momento dell’inizializzazione per visualizzare l’ultima scheda salvata. La prima volta che la pagina viene visitata, le tabs verranno compresse.

    Un modo breve e indipendente dal layout per farlo usando localStorage :

     $("#tabs").tabs({ active: localStorage.getItem("currentIdx"), activate: function(event, ui) { localStorage.setItem("currentIdx", $(this).tabs('option', 'active')); } }); 

    Un modo specifico per il layout di farlo usando attributi di dati personalizzati (probabilmente utile se i valori degli attributi dovessero essere usati in qualche modo altrove nel tuo script).

    Interfaccia utente di jQuery:

     $("#tabs").tabs({ active: localStorage.getItem("currentTabIndex"), activate: function(event, ui) { localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]); } }); 

    Esempio di layout HTML:

     
    tab 1 stuff...
    tab 2 stuff...
    tab 3 stuff...

    L’uso della funzione localStorage di HTML5 offre la soluzione per il problema ed è ora il modo consigliato per fare questo tipo di cose. I cookie causano l’aggiunta di dati aggiuntivi a ogni richiesta e risposta web.

    Scoprirai che localStorage è supportato dai browser come arcaico come IE8 e, se davvero vuoi il supporto per IE6 e IE7, c’è uno shim per farlo .

    HTML

     
      ....
    ...
    ...

    JS

     currTabIndex=sessionStorage['mytab_1']; 

    E la chiamata al tabfuntion

     $('.mytab').tabs({ active:currTabIndex, load:function(event,ui){ sessionStorage[''+this.id]=(ui.panel.index()-1); } }); 

    Spero che questo sarebbe utile.

    scheda evento triggers e quindi archivia su sessionStorage o localStorage.

     $(function() { var selectedTabId = sessionStorage.getItem("selectedTab"); selectedTabId = selectedTabId === null ? 0 : selectedTabId; //your default being 0 $("#tabs").tabs({ active: selectedTabId, activate : function( event, ui ) { selectedTabId = $("#tabs").tabs("option", "active"); sessionStorage.setItem("selectedTab", selectedTabId); } }); }); 

    Semplicemente:

     activate: function(event, ui) { localStorage.setItem("accIndex", $(this).tabs("option", "active")) }, active: parseInt(localStorage.getItem("accIndex")) 

    È ansible impostare la scheda triggers utilizzando l’opzione triggers come

     $( ".selector" ).tabs({ active: 1 }); 

    Esistono molti modi per trasferire valori a una pagina Web diversa dai cookie. Ad esempio, puoi utilizzare parametri di query e campi nascosti. Dovresti quindi creare uno script onload in grado di leggere entrambi gli esempi utilizzando l’esempio di onload di jQuery. $ (function () {}).

    Per leggere le stringhe di query, controlla questa pagina che ti fornisce il metodo

    Jquery legge la stringa di query

     function getParameterByName( name ) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return decodeURIComponent(results[1].replace(/\+/g, " ")); } 

    e leggere un campo nascosto.

     $( ".selector" ).tabs({ active: $('#my-hidden-fiel').val() }); 

    Sono d’accordo con la decisione di jquery ui di rimuovere questa funzionalità in quanto i cookie dovrebbero essere utilizzati solo per persistere le sessioni a mio parere e non per formare campi o tabs, ad esempio.