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 точно такой же, никаких особенностей, просто работает :) Скоро будут примеры… как решу вопрос с хостингом.