schede jquery ui non ha più il sostegno dei cookie? ora che cosa?

Mi scuso per questo essere una domanda aperta e conclusa, ma io sono in perdita.

A partire dalla versione 1.9 di jquery UI, hanno ammortizzato, utilizzando il cookie opzione per salvare lo stato attivo di schede in più pagine. http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

Non ho visto ALCUNA altra documentazione là fuori su come ottenere questo risultato ora! Così ho lasciato graffiare la mia testa.

La mia ipotesi migliore sarebbe quella di utilizzare un qualche tipo di event la creazione di un cookie, quindi caricare i cookie? O c’è qualche ALTRO modo per salvare lo stato attivo di schede in più pagine e dalle preferenze dell’utente?

InformationsquelleAutor PaulHanak | 2013-01-14

 

6 Replies
  1. 19

    Avuto lo stesso problema di morso di me oggi. Ecco cosa sembra funzionare:

    1. Utilizzare jquery.cookie plugin (https://github.com/carhartl/jquery-cookie) (Questo passaggio non è necessario, ma rende la vita più facile trattare con i cookie)
    2. Utilizzare il seguente frammento di codice:

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

    Imposta un cookie chiamato “activetab” che scade dopo 10 giorni (vedere jquery.cookie documentazione per altre opzioni) per ricordare la scheda attualmente selezionata ogni volta che una qualsiasi scheda viene cliccato. Questo cookie viene letto in fase di inizializzazione per visualizzare l’ultima scheda salvato. La prima volta che la pagina viene visitata, le schede saranno crollato.

    • Jquery.cookie plugin è stato spostato a js-cookie. Il codice cambierà per: $( ".selector" ).tabs({ active : Cookies.get('activetab'), activate : function( event, ui ){ Cookies.set( 'activetab', ui.newTab.index(),{ expires : 10 }); } });
  2. 9

    Breve, layout indipendenti modo di fare questo utilizzando localStorage:

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

    Un layout specifico modo di farlo utilizzando i dati personalizzati attributi (forse utile se i valori di attributo dovevano essere utilizzati, in qualche modo, altrove nel vostro script).

    jQuery UI:

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

    Esempio di layout HTML:

    <div id="tabs">
        <div id="tabs-1" data-tab-index="0">
           tab 1 stuff...
        </div>
        <div id="tabs-2" data-tab-index="1">
           tab 2 stuff...
        </div>    
        <div id="tabs-3" data-tab-index="2">
           tab 3 stuff...
        </div>
    </div>
    • Che bella! Grazie per la condivisione
    • funzionato come un fascino per me
  3. 4

    Utilizzando localStorage funzionalità di HTML5 fornisce la soluzione per il problema, ed è ora
    il modo consigliato di fare questo tipo di cosa. I cookie causa di dati aggiuntivi per essere aggiunti
    per ogni web di richiesta e di risposta.

    Troverete che localStorage è supportata dal browser arcaico, come IE8, e se veramente vogliamo il supporto per IE6 e IE7, c’è un shim per farlo.

    HTML

    <div class="mytab" id="mytab_1">
     <ul>....</ul>
     <div id="xx1">...</div>
     ...
    </div>

    JS

    currTabIndex=sessionStorage['mytab_1'];

    E il tabfuntion chiamata

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

    Spero che questo sarebbe utile.

    • Penso che si desidera utilizzare il activate evento piuttosto che il load evento.
    • Questo ha funzionato molto bene. Ho modificato un pochino però. Ho usato: attivare: function(event, ui) { sessionStorage[‘rem_tab’]=(ui.newTab.indice()); } Quindi var tabIndex = sessionStorage[‘rem_tab’]; E poi attivo: tabIndex
    • Il link per lo “spessore” per aggiungere localStorage per IE6 e IE7 è rotto, ma ho trovato uno che funziona per me: gist.github.com/remy/350433
  4. 4

    evento tabsactivate e poi negozio per 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);
            }
        });
    });
    • Questo funziona. Grazie!
  5. 4

    Semplicemente:

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

    È possibile impostare la scheda attiva utilizzando l’opzione attiva come

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

    Ci sono molti modi per passare i valori di una pagina web, oltre ai cookie. È possibile utilizzare i parametri di query e campi nascosti, per esempio. È quindi possibile creare un onload script che vorresti leggere o esempio di utilizzo di jQuery onload esempio. $(function () { }).

    Per leggere stringhe di query check out questa pagina che ti dà il metodo

    Jquery leggere 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 per leggere un campo nascosto.

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

    Sono d’accordo con jquery ui decisione di rimuovere questa funzione in quanto i cookie dovrebbe essere utilizzato per mantenere le sessioni a mio parere e non una forma di campi o le schede, per esempio.

    • +1 Anche nota se si indicare la scheda id nell’url hash, che scheda si aprirà automaticamente senza alcuna personalizzato onready codice.
    • Apprezzo il tuo contributo a questo. Il campo nascosto potrebbe essere la strada da percorrere. Come ho detto però, non voglio impostare la scheda attiva, voglio che l’UTENTE sarà in grado di selezionare la scheda attiva e continuare a utilizzare la stessa scheda su più pagine. Mi sono confuso, però, tu non mi hai detto come OTTENERE il parametro…. ma come faccio a IMPOSTARE il parametro che l’utente sceglie?
    • Quando l’utente cambia pagina, post il valore nascosto alla nuova pagina utilizzando il modulo di registrazione. Tenere il campo nascosto fino ad oggi come l’utente passa di schede utilizzando l’evento di attivare, come documentato qui. api.jqueryui.com/tabs/#event-activate

Lascia un commento