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

[@Ray]

Хорошо бы еще ссылочку на работающий пример.

[@KonstRuctor]

Даешь ссылку! Как раз сейчас занимаюсь табами на ui. Было бы интересно

[@pudeyan]

подскажите где разместить пример, хостинг для такого рода вещей чтоли, а вот примеры вставки в хтмл подготовил — но теперь кармы не хватает поправить пост :(

[@pudeyan]

Ну про то как подключать скрипт в хеаде и то что это делается после подключения 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>

[@pudeyan]

Этот пример семантически более правильный, но сложнее в верстке:

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>

[@pudeyan]

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

[@chetzof]

А чем он лучше UI tabs? (с jquery только первую неделю работаю, так-что уж простите если для кого-то разница очевидна).

[@pudeyan]

Лучше или хуже зависит от задач, которые вы решаете. Этот работает с jQuery 1.3+, не требует расширенной библиотеки jQuery UI, мало весит, но намного проще по функционалу. Если требуется динамическое добавление табов, навешивание обработчиков событий на табы, а также планируется плотная работа с другими компонентами UI — очевидно мое решение не подойдет. Задача этого скрипта «только сделать табы» без лишнего кода. Я буду и дальше его развивать в сторону уменьшения количества кода и повышения удобства использования.

[@chetzof]

Спасибо за объяснение :)

[@afi]

а что такое «Скрипт неразрушающий»?

[@pudeyan]

Смысл в том что для работы скрипта не требуется писать никаких onclick, вносить какие-либо изменения в html, таким образом, при отсутствии поддержки JS — вся информация будет доступна. Кроме того скрипт не влияет на валидность HTML (даже в DOM). Подробнее тут написано.

[@cmpeko3a]

Не пойму, а как заставить, чтоб по при загрузке открывалась не первая вкладка, а вторая-третья-десятая

[@pudeyan]

Надо просто добавлять нужной вкладке класс «active» в хтмл.

[@cmpeko3a]

вот почему то оно все же не хочет становится активной, т.е. первоначально при загрузке видно что вкладка активная, но когда происходит сам запуск скрипта
$(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>

[@pudeyan]

Скрипт исправил. Ему достаточно найти у табов класс active, писать класс active у контентов и классы inactive у неактивных вкладок не обязательно.

[@cmpeko3a]

29 строка
if ($(storage.tabs[i]).hasClass(this.activeLinkClass))

внутри метода initialize не видно this.activeLinkClass поэтому не происходит правильного срабатывания, нужно както по иному обращаться
как пока не понял сам не силен в jquery (

[@pudeyan]

Исправил. Спасибо за найденный баг! Я это впрок написал, даже не тестил :)