Jquery Tool: сохранить выбранную вкладку при обновлении или сохранить данные - PullRequest
Новая
       9

Jquery Tool: сохранить выбранную вкладку при обновлении или сохранить данные

9 голосов
/ 02 марта 2012

Я использую jquery tool для вкладки Ui,

Теперь я хочу оставить вкладку выбранной при перезагрузке страницы.Есть ли способ сделать это?ниже мой код 

$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});

Ответы [ 3 ]

7 голосов
/ 06 марта 2012

Вот простая реализация сохранения и извлечения 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 не возвращало неопределенное значение.

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

ОБНОВЛЕНИЕ

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

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

ОБНОВЛЕНИЕ для использования с jQuery Tools

В соответствии с 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:

enter image description here

3 голосов
/ 17 ноября 2012

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

$('#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 .

Я установил «путь», потому что в C # я установил это значение в контроллере mvc, который по умолчанию равен «/».Если путь не совпадает, он не будет перезаписывать существующий файл cookie.Вот мой код C # для установки значения того же 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: '/' });
     }
 });
1 голос
/ 06 марта 2012

Самый простой способ выжить после обновления страницы - сохранить идентификатор выбранной вкладки в сеансе или с помощью любого серверного скрипта.

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

См. тему: Хранить переменную Javascript на стороне клиента

...