Как стать автором
Обновить

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 точно такой же, никаких особенностей, просто работает :) Скоро будут примеры… как решу вопрос с хостингом.
Теги:
Хабы:
Всего голосов 8: ↑5 и ↓3 +2
Просмотры 514
Комментарии 17
Комментарии Комментарии 17

Публикации

Истории