Скрипт на jQuery, обеспечивающий базовую функциональность табов, мало весящий и очень гибкий. Также скрипт не должен содержать никакого представления (оформления) и DOM должен быть валиден, т.е. никаких выдуманных аттрибутов в DOM.
Скрипт неразрушающий, т.н. unobtrusive. «Цепляется» к DOM'у с помощью CSS-селекторов. При создании можно передать JSON с опциями, таким образом переопределив значения селекторов о умолчанию. Гибкость заключается в создании произвольного количества объектов «класса» Flexitabs на странице с разными опциями.
Скрипт достаточно подключить в хеаде после подключения jQuery. А вот пример более простого в дальнейшей верстке HTML:
Этот пример семантически более правильный, но сложнее в верстке:
Минимум что требуется в CSS — это прописать display:none для блоков с контентом табов, у них появится класс «inactive».
UPD 1.1: Добавлена поддержка вложенных табуляторов — HTML точно такой же, никаких особенностей, просто работает :) Скоро будут примеры… как решу вопрос с хостингом.
- (function($) {
- var Flexitabs = function(options) {
- this.defaults = {
- //CSS-selectors of target elements in DOM for unobtrusive attaching
- containerSelector: '.flexitabs',
- tabSelector: '.tab',
- contentSelector: '.content',
- //CSS classes for indicate active and inactive tabs and contents of tabs
- activeLinkClass: 'active', //also class for marking initial active tab in your HTML
- inactiveLinkClass: 'inactive'
- }
- this.initialize = function() {
- var flexitabs_object = this;
- $(this.containerSelector).each(function() {
- var storage = {};
- storage.object = this;
- //finding tabs and it's contents in DOM
- storage.tabs = $.grep($(this).find(flexitabs_object.tabSelector), function(tab) {
- if ($(tab).parents(flexitabs_object.containerSelector)[0] == storage.object)
- return true;
- });
- storage.contents = $.grep($(this).find(flexitabs_object.contentSelector), function(tab) {
- if ($(tab).parents(flexitabs_object.containerSelector)[0] == storage.object)
- return true;
- });
- if (storage.tabs.length <= storage.contents.length) {//avoiding nonfunctional tabs
- var active = 0;
- var container = $(this);
- $(storage.tabs).each(function(i) {
- //initializing storage for tabs and contents
- var tab_storage = {};
- var content_storage = {};
- tab_storage.object = content_storage.object = container;
- tab_storage.index = content_storage.index = i;
- //bind click handler to tabs
- $(this).click(function() {
- flexitabs_object.activate(this);
- });
- //preselecting active tab from DOM
- if ($(this).hasClass(flexitabs_object.activeLinkClass))
- active = i;
- //storing data in jQuery data-storages, assigned to DOM-elements
- $(storage.tabs[i]).data('Flexitabs', tab_storage);
- $(storage.contents[i]).data('Flexitabs', content_storage);
- });
- storage.active = active;
- container.data('Flexitabs', storage); //storing whole tabulator data in container storage
- flexitabs_object.activate(storage.tabs[active]); //initial tab activation
- }
- });
- }
- this.activate = function(tab) {
- var index = $(tab).data('Flexitabs').index;
- var storage = $(tab).data('Flexitabs').object;
- var tabs_storage = $(storage).data('Flexitabs').tabs;
- var contents_storage = $(storage).data('Flexitabs').contents;
-
- //deactivation of all tabs and contents
- $(tabs_storage).removeClass(this.activeLinkClass).addClass(this.inactiveLinkClass);
- $(contents_storage).removeClass(this.activeLinkClass).addClass(this.inactiveLinkClass);
-
- //activation of current clicked tab
- $(tab).removeClass(this.inactiveLinkClass).addClass(this.activeLinkClass);
- $(contents_storage[index]).removeClass(this.inactiveLinkClass).addClass(this.activeLinkClass);
- storage.active = index;
- }
- $.extend(this, this.defaults, options);
- this.initialize();
- };
- $(function() {
- new Flexitabs();
- })
- })(jQuery);
Скрипт неразрушающий, т.н. unobtrusive. «Цепляется» к DOM'у с помощью CSS-селекторов. При создании можно передать JSON с опциями, таким образом переопределив значения селекторов о умолчанию. Гибкость заключается в создании произвольного количества объектов «класса» Flexitabs на странице с разными опциями.
Скрипт достаточно подключить в хеаде после подключения jQuery. А вот пример более простого в дальнейшей верстке HTML:
- <div class="flexitabs">
- <div class="tabs">
- <div class="tab">Таб1</div>
- <div class="tab">Таб2</div>
- <div class="tab">Таб3</div>
- </div>
- <div class="contents">
- <div class="content">Контент1</div>
- <div class="content">Контент2</div>
- <div class="content">Контент3</div>
- </div>
- </div>
Этот пример семантически более правильный, но сложнее в верстке:
- <script type="text/javascript">
- $(function() {
- new Flexitabs({
- tabSelector: 'dt',
- contentSelector: 'dd',
- });
- });
- </script>
- <dl class="flexitabs">
- <dt>Таб1</dt>
- <dd>Контент1</dd>
- <dt>Таб2</dt>
- <dd>Контент2</dd>
- <dt>Таб3</dt>
- <dd>Контент3</dd>
- </dl>
Минимум что требуется в CSS — это прописать display:none для блоков с контентом табов, у них появится класс «inactive».
UPD 1.1: Добавлена поддержка вложенных табуляторов — HTML точно такой же, никаких особенностей, просто работает :) Скоро будут примеры… как решу вопрос с хостингом.