horizontal - jquery ui themes

Estado del menú de guardado del menú de acordeón de Jquery UI incluso después de la actualización

Question

Tengo el menú de Acordeón jquery UI. El clic muestra el elemento div específico. Me pregunto si actualizo la página cuando, por ejemplo, div3 está activo (visible), ¿cómo puedo activar div3 nuevamente después de volver a cargar la página? Estoy tratando de resolver esto con cookies, pero no tuve suerte. ¿Hay alguna demo que alguien conozca?

Gracias.

Answer 1

Aquí está el código que primero guarda el estado de acordeón seleccionado y luego activa ese estado en la página de recarga o incluso en la próxima visita, siempre y cuando la cookie permanezca.

        jQuery(document).ready(function(){
            var act = 0;
            $( "#accordion" ).accordion({
                create: function(event, ui) {
                    //get index in cookie on accordion create event
                    if($.cookie(''saved_index'') != null){
                       act =  parseInt($.cookie(''saved_index''));
                    }
                },
                change: function(event, ui) {
                    //set cookie for current index on change event
                    $.cookie(''saved_index'', null);
                    $.cookie(''saved_index'', ui.options.active);
                },
                active:parseInt($.cookie(''saved_index''))
            });
        });

He usado el plugin jquery para cookies, puede descargarlo desde aquí https://github.com/carhartl/jquery-cookie/

Answer 2

Con la nueva interfaz de usuario 1.10.1

$(function () {
    var icons = {
        header: "ui-icon-triangle-1-e",
        activeHeader: "ui-icon-triangle-1-s",
        headerSelected: "ui-icon-triangle-1-s"
    };
    var act = 0;
    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true,
        clearStyle: true,
        heightStyle: "content",
        autoHeight: false,
        create: function(event, ui) {
            //get index in cookie on accordion create event
            if($.cookie(''saved_index'') != null){
               act =  parseInt($.cookie(''saved_index''));
            }
        },
        activate: function(event, ui) {
            //set cookie for current index on change event
            var active = jQuery("#accordion").accordion(''option'', ''active'');
            $.cookie(''saved_index'', null);
            $.cookie(''saved_index'', active);
        },
        active:parseInt($.cookie(''saved_index''))
    });
    $( "#toggle" ).button().toggle(function() {
        $( "#accordion" ).accordion( "option", "icons", false );
    },
    function() {
        $( "#accordion" ).accordion( "option", "icons", icons );
    });
});

Answer 3

La solución @DeM funcionó para mí, pero seguí recibiendo este error.

no puede llamar a métodos en acordeón antes de la inicialización; intentado llamar al método ''opción''

Las siguientes modificaciones funcionaron para mí:

$("#accordion").accordion({    
    //set localStorage for current index on activate event
    activate: function(event, ui) {  
        //Find the index of the header. This can be the class|element you specify in the "header" init argument.
        var index =  $(this).find("h3").index(ui.newHeader[0]);
        localStorage.setItem("accIndex", index);
    },
    // "|| 0" is used to activate first by default
    active: parseInt(localStorage.getItem("accIndex")) || 0   
});

Answer 4

La solución elegida no funcionó para mí (jQuery 1.8.2, jQuery-UI 1.9.1).

Lo modifiqué como en el siguiente fragmento:

jQuery(document).ready(function(){
    $( "#accordion" ).accordion({
        change: function(event, ui) {
            //set cookie for current index on change event
            $.cookie(''saved_index'', null);
            $.cookie(''saved_index'', $( "#accordion" )
                    .accordion( "option", "active" ));
        },
        active:parseInt($.cookie(''saved_index''))
    });
});

Answer 5

No quería usar cookies o variables de sesión. Elegí Almacenamiento Local de HTML5.

Esta es mi solución:

$("#accordion").accordion({    
    //set localStorage for current index on activate event
    activate: function(event, ui) {        
        localStorage.setItem("accIndex", $(this).accordion("option", "active"));
    },
    active: parseInt(localStorage.getItem("accIndex"))    
});

Answer 6

Solo una pequeña mejora de la solución anterior para administrar un acordeón que tiene toda la entrada cerrada (activa: falsa):

$(function () {
    var myact = false;
    $( "#myaccordion" ).accordion({
        clearStyle: true,
        collapsible: true,      // allow to close completely
        create: function (event, ui) {
            //get index in cookie on accordion create event
            if (($.cookie(''saved_index'') != null) && ($.cookie(''saved_index'') != ''false'')) {
                myact = parseInt($.cookie(''saved_index''));
            }
        },
        change: function (event, ui) {
            //set cookie for current index on change event
            myact = ui.options.active;
            $.cookie(''saved_index'', null, { expires: 2, path: ''/'' });   // session cookie
            $.cookie(''saved_index'', myact, { expires: 2, path: ''/'' });
        },
        active: ($.cookie(''saved_index'') == null) ? 0 : ($.cookie(''saved_index'') == ''false'') ? false : parseInt($.cookie(''saved_index''))
    });
});