¿Las tabs jquery ui ya no admiten cookies? ¿ahora que?

Me disculpo por ser una pregunta abierta, pero estoy perdido.

Desde la versión 1.9 de la interfaz de usuario de jquery, se depreciaron utilizando la opción de cookie para guardar el estado activo de las tabs en varias páginas. http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

¡No he visto NINGUNA otra documentación por ahí sobre cómo lograr esto ahora! Así que me quedé rascándome la cabeza.

Mi mejor opción sería usar algún tipo de event para crear una cookie, y luego cargar la cookie. ¿O hay alguna otra forma de guardar el estado activo de las tabs en varias páginas y por preferencia del usuario?

    Me ha mordido el mismo problema hoy. Esto es lo que parece funcionar:

    1. Use el plugin jquery.cookie ( https://github.com/carhartl/jquery-cookie ) (Este paso no es necesario, pero hace la vida más fácil lidiando con las cookies)
    2. Use el siguiente fragmento de código:

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

    Esto establece una cookie llamada “activetab” que expira después de 10 días (consulte la documentación de jquery.cookie para ver más opciones) para recordar la pestaña actualmente seleccionada cada vez que se haga clic en cualquier pestaña. Esta cookie se lee en el momento de la inicialización para mostrar la última pestaña guardada. La primera vez que se visita la página, las tabs se colapsarán.

    Manera corta, independiente del diseño, de hacer esto usando localStorage :

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

    Una forma específica de diseño de hacerlo utilizando atributos de datos personalizados (posiblemente útil si los valores de los atributos se usarían de alguna otra forma en el script).

    jQuery UI:

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

    Ejemplo de diseño HTML:

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

    El uso de la característica localStorage de HTML5 brinda la solución al problema y ahora es la forma recomendada de hacer este tipo de cosas. Las cookies hacen que se agreguen datos adicionales a cada solicitud y respuesta web.

    Descubrirá que localStorage es compatible con navegadores tan arcaicos como IE8, y si realmente quiere soporte para IE6 e IE7, hay una solución para hacerlo .

    HTML

     
      ....
    ...
    ...

    JS

     currTabIndex=sessionStorage['mytab_1']; 

    Y la llamada de tabfuntion

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

    Espero que esto sea útil.

    evento tabsactivate y luego almacenar en 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); } }); }); 

    Simplemente:

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

    Puede establecer la pestaña activa usando la opción activa, como

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

    Hay muchas maneras de pasar valores a una página web que no sean cookies. Puede usar parámetros de consulta y campos ocultos, por ejemplo. A continuación, crearía un script de onload que leería cualquier ejemplo utilizando el ejemplo de carga de jQuery. $ (función () {}).

    Para leer cadenas de consulta, echa un vistazo a esta página que te da el método

    Jquery leyó cadena de consulta

     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, " ")); } 

    y para leer un campo oculto.

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

    Estoy de acuerdo con la decisión de jquery ui de eliminar esta característica, ya que las cookies solo deberían usarse para persistir en mi opinión y no formar campos o tabs, por ejemplo.