Jquery ui tabs больше не поддерживает cookie? что теперь?

Извиняюсь за то, что это открытый вопрос, но я в недоумении.

Начиная с версии 1.9 пользовательского интерфейса jquery, они обесценились с помощью параметра cookie, чтобы сохранить активное состояние вкладок на нескольких страницах. http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

Я еще не видел ЛЮБОЙ другой документации о том, как это сделать сейчас! Так что я остаюсь царапать голову.

Мое лучшее предположение - использовать какой-то event для создания файла cookie, а затем загрузить файл cookie? Или есть какой-то другой способ сохранить активное состояние вкладок на нескольких страницах и по предпочтениям пользователя?

Ответ 1

Если бы тот же самый вопрос укусил меня сегодня. Вот что работает:

Использовать плагин jquery.cookie(https://github.com/carhartl/jquery-cookie) (Этот шаг не требуется, но это облегчает работу с кукисами)

Используйте следующий фрагмент кода:

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

Это устанавливает куки файл под названием "activetab", срок действия которого истекает через 10 дней (см. jquery.cookie documentation для получения дополнительных опций), чтобы запомнить выбранную вкладку в данный момент, когда любая вкладка щелчок. Этот файл cookie считывается во время инициализации, чтобы отобразить последнюю сохраненную вкладку. При первом посещении страницы вкладки будут свернуты.

Ответ 2

Короткий, макет-независимый способ сделать это с помощью localStorage:

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

Макет-специфический способ сделать это с использованием пользовательских атрибутов данных (возможно, полезно, если значения атрибута должны были каким-то образом использоваться в другом месте вашего script).

jQuery UI:

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

Пример компоновки 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>

Ответ 3

Использование функции localStorage HTML5 дает решение проблемы, и теперь рекомендуемый способ сделать это. Файлы cookie вызывают добавление дополнительных данных для каждого веб-запроса и ответа.

Вы обнаружите, что localStorage поддерживается браузерами как архаичный, как IE8, и если вы действительно хотите поддерживать IE6 и IE7, это прокладка для этого.

HTML

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

currTabIndex=sessionStorage['mytab_1'];

И вызов tabfuntion

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

Надеюсь, что это будет полезно.

Ответ 4

event tabsactivate, а затем сохранить в sessionStorage или 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);
        }
    });
});

Ответ 5

Просто:

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

Ответ 6

Вы можете установить активную вкладку, используя активную опцию, например

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

Существует множество способов передать значения на веб-страницу, отличную от файлов cookie. Например, вы можете использовать параметры запроса и скрытые поля. Затем вы создадите onload script, который будет читать любой пример, используя пример загрузки jQuery. $(function() {}).

Чтобы прочитать строки запроса, просмотрите эту страницу, которая дает вам метод

строка запроса чтения Jquery

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

и прочитать скрытое поле.

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

Я согласен с решением jquery ui удалить эту функцию, поскольку файлы cookie действительно должны использоваться только для сохранения сессий по моему мнению, а не для создания полей или вкладок, например.