24 November 2009

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

Lumber room
Скрипт на 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. //deactivation of all tabs and contents
  58. $(tabs_storage).removeClass(this.activeLinkClass).addClass(this.inactiveLinkClass);
  59. $(contents_storage).removeClass(this.activeLinkClass).addClass(this.inactiveLinkClass);
  60. //activation of current clicked tab
  61. $(tab).removeClass(this.inactiveLinkClass).addClass(this.activeLinkClass);
  62. $(contents_storage[index]).removeClass(this.inactiveLinkClass).addClass(this.activeLinkClass);
  63. storage.active = index;
  64. }
  65. $.extend(this, this.defaults, options);
  66. this.initialize();
  67. };
  68. $(function() {
  69. new Flexitabs();
  70. })
  71. })(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 точно такой же, никаких особенностей, просто работает :) Скоро будут примеры… как решу вопрос с хостингом.
Tags:unobtrusivejsjquerytabsuiuxwebdevvalid
Hubs: Lumber room
+2
417 16
Comments 17
Top of the last 24 hours