Обновлено: 28 марта 2017, 01:15
 Marabar

Запомнить вкладку - jQuery UI, плагин tabs. Используем cookie.

В библиотеке jQuery UI, есть замечательный виджет Tabs (вкладки). Предназначен он для экономии места на выделенном участке сайта — не буду вдаваться в подробности… Для запоминания открытой вкладки, после перезагрузки страницы, используются cookie. Стандартный код виджета Tabs выглядит так:
<div id="tabs">
	<ul>
            <li><a href="#tabs-1">Вкладка 1</a></li>
	    <li><a href="#tabs-2">Вкладка 2</a></li>
	    <li><a href="#tabs-3">Вкладка 3</a></li>
	</ul>
	<div id="tabs-1">
            <p>Вкладка 1.</p>
        </div>
        <div id="tabs-2">
            <p>Вкладка 2.</p>
        </div>
        <div id="tabs-3">
            <p>Вкладка 3.</p>
        </div>
</div>
<script>
$(function() {
    $( "#tabs" ).tabs({
        cookie: { expires:1 }  // запомнить на один день
    });
});
</script>
 Начиная с версии 1.10, библиотеки jQuery UI, такое управление cookie — больше не поддерживается. На сегодняшний день актуально такое управление:
<script>
/*
var tabCookieName = "cookie_name";
    $("#tabs").tabs ({
    active : ($.cookie(tabCookieName) || 0),
    activate : function ( event, ui ) {
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        $.cookie(tabCookieName, newIndex);
    }
});(jQuery)
*/
</script>
 UPD странно, но этот вариант перестал работать через некоторое время. Удалять не буду — есть другое решение:
<script>
$(function() {
    var index = 'key_tab';
    var dataStore = window.sessionStorage;
    try {
        var oldIndex = dataStore.getItem(index);
    } catch(e) {
        var oldIndex = 0;
    }
    $('#tabs').tabs({
        active : oldIndex,
        activate : function( event, ui ){
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            dataStore.setItem( index, newIndex ) 
        }
    }); 
}); (jQuery)
</script>
   Marabar Шпаргалка 0    2 0

Комментарии ()

  1. Татьяна 10 декабря 2014, 17:07 # 0
    Здравствуйте, скрипт отлично работает! Огромное спасибо, долго искала. Но меня мучает вопрос, как поменять стили активной вкладки? hover работает как положено, selected не хочет. К Вам обращаюсь, когда перепробовала все, но ответ так и не нашла. Надеюсь на Вашу помощь.
    1. Marabar 10 декабря 2014, 17:54 # 0
      Здравствуйте. Меняйте через CSS. Библиотека jquery-ui.css подключена? Если подключена, смотрите в исходный код, там должен быть класс у активного таба — ui-tabs-active
      1. Татьяна 10 декабря 2014, 18:01 # 0
        у меня свой css. без этой библиотеки не получится?
        1. Marabar 10 декабря 2014, 18:08 # 0
          Должно получиться, смотрите исходный код — F12.
          Я пытаюсь по памяти вспомнить. Или, там должен присутствовать, класс — ui-ctate-active
          В своём файле CSS и указывайте стили для активной вкладки.
          1. Татьяна 10 декабря 2014, 18:11 # 0
            #tabs li a:active{ не работает
            #tabs li a:hover { работает
            Я что-то как-то запуталась. Буду копать.
            1. Marabar 10 декабря 2014, 18:17 # 0
              Нет, не так.
              #tabs .ui-tabs-active {
              ...
              ...
              }
              
              1. Татьяна 10 декабря 2014, 18:23 # 0
                не хочет и так (
                1. Marabar 10 декабря 2014, 19:06 # 0
                  В исходном коде какие есть классы у активной вкладки?
        2. Татьяна 10 декабря 2014, 18:06 # 0
          И возник еще один вопрос..) есть ли возможность сделать якорь на одну из вкладок. Похоже нужно будет разбираться со скриптом, потому что обычные методы не работают. Может подскажете направление… Спасибо!
          1. Marabar 10 декабря 2014, 19:08 # 0
            Можно, но надо скрипт переписать. Завтра посмотрю как до компа доберусь нормально.
            1. Marabar 10 декабря 2014, 19:25 # 0
              Попробуйте добавить этот код:
              $(document).on('click', 'a, aria-controls', function() {
                  var href = $(this).attr('href');
                  history.pushState({}, '', href);
              });
              
              перед закрытием блока:
              }); (jQuery)
              </script>
              



            Вы должны авторизоваться , чтобы оставлять комментарии.