Flexitabs 1.1 — простой и гибкий скрипт для вкладок на jQuery

    Скрипт на jQuery, обеспечивающий базовую функциональность табов, мало весящий и очень гибкий. Также скрипт не должен содержать никакого представления (оформления) и DOM должен быть валиден, т.е. никаких выдуманных аттрибутов в DOM.

    1. (function($) {
    2.     var Flexitabs = function(options) {
    3.         this.defaults = {
    4.             //CSS-selectors of target elements in DOM for unobtrusive attaching
    5.             containerSelector: '.flexitabs',
    6.             tabSelector: '.tab',
    7.             contentSelector: '.content',
    8.             //CSS classes for indicate active and inactive tabs and contents of tabs
    9.             activeLinkClass: 'active', //also class for marking initial active tab in your HTML
    10.             inactiveLinkClass: 'inactive'
    11.         }
    12.         this.initialize = function() {
    13.             var flexitabs_object = this;
    14.             $(this.containerSelector).each(function() {
    15.                 var storage = {};
    16.                 storage.object = this;
    17.                 //finding tabs and it's contents in DOM
    18.                 storage.tabs = $.grep($(this).find(flexitabs_object.tabSelector), function(tab) {
    19.                     if ($(tab).parents(flexitabs_object.containerSelector)[0] == storage.object)
    20.                         return true;
    21.                 });
    22.                 storage.contents = $.grep($(this).find(flexitabs_object.contentSelector), function(tab) {
    23.                     if ($(tab).parents(flexitabs_object.containerSelector)[0] == storage.object)
    24.                         return true;
    25.                 });
    26.                 if (storage.tabs.length <= storage.contents.length) {//avoiding nonfunctional tabs
    27.                     var active = 0;
    28.                     var container = $(this);
    29.                     $(storage.tabs).each(function(i) {
    30.                         //initializing storage for tabs and contents
    31.                         var tab_storage = {};
    32.                         var content_storage = {};
    33.                         tab_storage.object = content_storage.object = container;
    34.                         tab_storage.index = content_storage.index = i;
    35.                         //bind click handler to tabs
    36.                         $(this).click(function() {
    37.                             flexitabs_object.activate(this);
    38.                         });
    39.                         //preselecting active tab from DOM
    40.                         if ($(this).hasClass(flexitabs_object.activeLinkClass))
    41.                             active = i;
    42.                         //storing data in jQuery data-storages, assigned to DOM-elements
    43.                         $(storage.tabs[i]).data('Flexitabs', tab_storage);
    44.                         $(storage.contents[i]).data('Flexitabs', content_storage);
    45.                     });
    46.                     storage.active = active;
    47.                     container.data('Flexitabs', storage); //storing whole tabulator data in container storage
    48.                     flexitabs_object.activate(storage.tabs[active]); //initial tab activation
    49.                 }
    50.             });
    51.         }
    52.         this.activate = function(tab) {
    53.             var index = $(tab).data('Flexitabs').index;
    54.             var storage = $(tab).data('Flexitabs').object;
    55.             var tabs_storage = $(storage).data('Flexitabs').tabs;
    56.             var contents_storage = $(storage).data('Flexitabs').contents;
    57.             
    58.             //deactivation of all tabs and contents
    59.             $(tabs_storage).removeClass(this.activeLinkClass).addClass(this.inactiveLinkClass);
    60.             $(contents_storage).removeClass(this.activeLinkClass).addClass(this.inactiveLinkClass);
    61.             
    62.             //activation of current clicked tab
    63.             $(tab).removeClass(this.inactiveLinkClass).addClass(this.activeLinkClass);
    64.             $(contents_storage[index]).removeClass(this.inactiveLinkClass).addClass(this.activeLinkClass);
    65.             storage.active = index;
    66.         }
    67.         $.extend(this, this.defaults, options);
    68.         this.initialize();
    69.     };
    70.     $(function() {
    71.         new Flexitabs();
    72.     })
    73. })(jQuery);

    Скрипт неразрушающий, т.н. unobtrusive. «Цепляется» к DOM'у с помощью CSS-селекторов. При создании можно передать JSON с опциями, таким образом переопределив значения селекторов о умолчанию. Гибкость заключается в создании произвольного количества объектов «класса» Flexitabs на странице с разными опциями.

    Скрипт достаточно подключить в хеаде после подключения jQuery. А вот пример более простого в дальнейшей верстке HTML:
    1. <div class="flexitabs">
    2.   <div class="tabs">
    3.     <div class="tab">Таб1</div>
    4.     <div class="tab">Таб2</div>
    5.     <div class="tab">Таб3</div>
    6.   </div>
    7.   <div class="contents">
    8.     <div class="content">Контент1</div>
    9.     <div class="content">Контент2</div>
    10.     <div class="content">Контент3</div>
    11.   </div>
    12. </div>

    Этот пример семантически более правильный, но сложнее в верстке:
    1. <script type="text/javascript">
    2.   $(function() {
    3.     new Flexitabs({
    4.       tabSelector: 'dt',
    5.       contentSelector: 'dd',
    6.     });
    7.   });
    8. </script>
    9. <dl class="flexitabs">
    10.   <dt>Таб1</dt>
    11.   <dd>Контент1</dd>
    12.   <dt>Таб2</dt>
    13.   <dd>Контент2</dd>
    14.   <dt>Таб3</dt>
    15.   <dd>Контент3</dd>
    16. </dl>

    Минимум что требуется в CSS — это прописать display:none для блоков с контентом табов, у них появится класс «inactive».

    UPD 1.1: Добавлена поддержка вложенных табуляторов — HTML точно такой же, никаких особенностей, просто работает :) Скоро будут примеры… как решу вопрос с хостингом.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 17

      +5
      Хорошо бы еще ссылочку на работающий пример.
        +1
        Даешь ссылку! Как раз сейчас занимаюсь табами на ui. Было бы интересно
          +1
          подскажите где разместить пример, хостинг для такого рода вещей чтоли, а вот примеры вставки в хтмл подготовил — но теперь кармы не хватает поправить пост :(
            –1
            Ну про то как подключать скрипт в хеаде и то что это делается после подключения jQuery я промолчу. А вот пример более простого в дальнейшей верстке HTML:
            1. <div class="flexitabs">
            2.   <div class="tabs">
            3.     <div class="tab">Таб1</div>
            4.     <div class="tab">Таб2</div>
            5.     <div class="tab">Таб3</div>
            6.   </div>
            7.   <div class="contents">
            8.     <div class="content">Контент1</div>
            9.     <div class="content">Контент2</div>
            10.     <div class="content">Контент3</div>
            11.   </div>
            12. </div>
              0
              Этот пример семантически более правильный, но сложнее в верстке:
              1. <script type="text/javascript">
              2.   $(function() {
              3.     new Flexitabs({
              4.       tabSelector: 'dt',
              5.       contentSelector: 'dd',
              6.     });
              7.   });
              8. </script>
              9. <dl class="flexitabs">
              10.   <dt>Таб1</dt>
              11.   <dd>Контент1</dd>
              12.   <dt>Таб2</dt>
              13.   <dd>Контент2</dd>
              14.   <dt>Таб3</dt>
              15.   <dd>Контент3</dd>
              16. </dl>

                0
                Минимум что требуется в CSS — это прописать display:none для блоков с контентом табов, у них появится класс «inactive».
                  +1
                  А чем он лучше UI tabs? (с jquery только первую неделю работаю, так-что уж простите если для кого-то разница очевидна).
                    +1
                    Лучше или хуже зависит от задач, которые вы решаете. Этот работает с jQuery 1.3+, не требует расширенной библиотеки jQuery UI, мало весит, но намного проще по функционалу. Если требуется динамическое добавление табов, навешивание обработчиков событий на табы, а также планируется плотная работа с другими компонентами UI — очевидно мое решение не подойдет. Задача этого скрипта «только сделать табы» без лишнего кода. Я буду и дальше его развивать в сторону уменьшения количества кода и повышения удобства использования.
                      0
                      Спасибо за объяснение :)
                    0
                    а что такое «Скрипт неразрушающий»?
                      0
                      Смысл в том что для работы скрипта не требуется писать никаких onclick, вносить какие-либо изменения в html, таким образом, при отсутствии поддержки JS — вся информация будет доступна. Кроме того скрипт не влияет на валидность HTML (даже в DOM). Подробнее тут написано.
                      0
                      Не пойму, а как заставить, чтоб по при загрузке открывалась не первая вкладка, а вторая-третья-десятая
                        0
                        Надо просто добавлять нужной вкладке класс «active» в хтмл.
                          0
                          вот почему то оно все же не хочет становится активной, т.е. первоначально при загрузке видно что вкладка активная, но когда происходит сам запуск скрипта
                          $(function() {
                          new Flexitabs();
                          })
                          он выставляет активность на первую вкладку, а та вкладка у которой было прописано active,

                          <div class='flexitabs'>
                          <div class='tabs'>
                          <div class='tab inactive'>Таб1</div>
                          <div class='tab active'>Таб2</div>
                          <div class='tab inactive'>Таб3</div>
                          </div>
                          <div class='contents'>
                          <div class='content inactive'>Контент1</div>
                          <div class='content active'>Контент2</div>
                          <div class='content inactive'>Контент3</div>
                          </div>
                          </div>

                          становится inactive

                          <div class='flexitabs'>
                          <div class='tabs'>
                          <div class='tab active'>Таб1</div>
                          <div class='tab inactive'>Таб2</div>
                          <div class='tab inactive'>Таб3</div>
                          </div>
                          <div class='contents'>
                          <div class='content active'>Контент1</div>
                          <div class='content inactive'>Контент2</div>
                          <div class='content inactive'>Контент3</div>
                          </div>
                          </div>
                            0
                            Скрипт исправил. Ему достаточно найти у табов класс active, писать класс active у контентов и классы inactive у неактивных вкладок не обязательно.
                            +1
                            29 строка
                            if ($(storage.tabs[i]).hasClass(this.activeLinkClass))

                            внутри метода initialize не видно this.activeLinkClass поэтому не происходит правильного срабатывания, нужно както по иному обращаться
                            как пока не понял сам не силен в jquery (
                              0
                              Исправил. Спасибо за найденный баг! Я это впрок написал, даже не тестил :)

                        Only users with full accounts can post comments. Log in, please.