JQuery UI аккордеон меню сохранение состояния меню даже после обновления

Question

JQuery UI аккордеон меню сохранение состояния меню даже после обновления

У меня есть меню аккордеона jQuery UI. По щелчку мыши показывает определенный элемент div. Интересно, если я обновляю страницу, когда, например, div3 активен (виден), как я могу снова сделать div3 активным после перезагрузки страницы? Я пытаюсь решить эту проблему с помощью печенья, но безуспешно. Есть ли демо, о котором кто-нибудь знает?

Спасибо.

678 6

jQuery jquery-ui

6 ответов:

Comments

Ничего не найдено.

Mudasser · Accepted Answer · 2012-06-27 21:46:30

Вот код, который сначала сохраняет выбранное состояние аккордеона, а затем активирует это состояние при перезагрузке страницы или даже при следующем посещении, пока сохраняется файл cookie.
        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'))
            });
        });
Я использовал jQuery cookie плагин, вы можете скачать его здесь https://github.com/carhartl/jquery-cookie/

Christopher Dubeau · Accepted Answer · 2014-09-26 14:15:18

С Новым 1.10.1 UI

$(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 );
    });
});

DeM · Accepted Answer · 2014-09-26 13:36:02

Я не хотел использовать файлы cookie или переменные сеанса. Я выбрал локальное хранилище HTML5.

Вот мое решение:
$("#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"))    
});

Gianpiero Caretti · Accepted Answer · 2012-10-08 11:03:16

Просто небольшое улучшение к решению выше, чтобы управлять аккордеоном, когда все записи закрыты (active: false):

$(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'))
    });
});

Federico Bellucci · Accepted Answer · 2012-12-04 16:11:59

Выбранное решение не сработало для меня (jQuery 1.8.2, jQuery-UI 1.9.1).

Я изменил его, как в следующем фрагменте:
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'))
    });
});

Darrelk · Accepted Answer · 2017-09-15 13:29:28

@dem решение работало для меня, но я продолжаю получать эту ошибку.

Не может вызывать методы на аккордеоне до инициализации; предпринята попытка вызов метода 'option'

Для меня работали следующие модификации:
$("#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   
});