Инструмент JQuery: сохранить выбранную вкладку для обновления или сохранения данных.

Ответ 1

Вот простая реализация хранения файла cookie и его получения:

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

Затем для сохранения/получения файлов cookie с вкладками пользовательского интерфейса jQuery:

$(function() {
   // retrieve cookie value on page load
   var $tabs = $('ul.tabs').tabs();
   $tabs.tabs('select', getCookie("selectedtab"));

   // set cookie on tab select
   $("ul.tabs").bind('tabsselect', function (event, ui) {
      setCookie("selectedtab", ui.index + 1, 365);
   });
});

Конечно, вы, вероятно, захотите проверить, установлен ли файл cookie и вернуть 0 или что-то, чтобы getCookie не возвращал undefined.

С другой стороны, ваш селектор ul.tabs может быть улучшен, указав вместо этого вкладки по id. Если у вас действительно есть коллекция вкладок на странице, вам понадобится лучший способ сохранить файл cookie по имени - что-то более конкретное, для которого была выбрана/сохранена коллекция вкладок.

ОБНОВЛЕНИЕ

Хорошо, я исправил использование ui.index, теперь он сохраняет с приращением +1 к индексу вкладки.

Вот пример этого действия: http://jsbin.com/esukop/7/edit#preview

UPDATE для использования с инструментами jQuery

В соответствии с jQuery Tools API он должен работать следующим образом:

$(function() {
   //instantiate tabs object 
   $("ul.tabs").tabs("div.panes > div");

   // get handle to the api (must have been constructed before this call)
   var api = $("ul.tabs").data("tabs");

   // set cookie when tabs are clicked
   api.onClick(function(e, index) {
          setCookie("selectedtab", index + 1, 365);
   });     
   // retrieve cookie value on page load
   var selectedTab = getCookie("selectedtab");

   if (selectedTab != "undefined") {
    api.click( parseInt(selectedTab) ); // must parse string to int for api to work
   }

});

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

Вот пример работы (нестационарный): http://jsbin.com/ixamig/12/edit#preview

Вот что я вижу в Firefox при проверке файла cookie с примера jsbin.com:

Ответ 2

Это то, что сработало для меня... по крайней мере, я еще не сталкивался с какими-либо проблемами:

$('#tabs').tabs({
            select: function (event, ui)
            {
                $.cookie('active_tab', ui.index, { path: '/' });
            }
        });
$('#tabs').tabs("option", "active", $.cookie('active_tab'));

Я использую: jQuery 1.8.2, jQuery UI 1.9.1, jQuery Cookie Plugin.

Я устанавливаю "путь", потому что в С# я устанавливаю это значение в контроллере mvc, который по умолчанию "/". Если путь не совпадает, он не будет перезаписывать существующий файл cookie. Вот мой код С#, чтобы установить значение того же файла cookie, который использовался выше:

Response.Cookies["active_tab"].Value = "myTabIndex";

Изменить: Начиная с jQuery UI 1.10.2 (я просто пробовал эту версию, не уверен, что она была нарушена в предыдущих версиях), мой метод не работает. Этот новый код установит cookie с использованием jQuery UI 1.10.2

 $('#tabs').tabs({
     activate: function (event, ui) {
         $.cookie('active_tab', ui.newTab.index(), { path: '/' });
     }
 });

Ответ 3

Самый простой способ пережить обновление страницы - сохранить выбранный идентификатор вкладки в сеансе или через любую серверную сторону script.

Только методы хранения данных на стороне клиента: Cookies или LocalStorage.

Обратитесь к теме: Храните Javascript с переменной стороны клиента