How to become an author
Search
Write a publication
Pull to refresh

Comments 17

Хорошо бы еще ссылочку на работающий пример.
Total votes 5: ↑5 and ↓0+5
Даешь ссылку! Как раз сейчас занимаюсь табами на ui. Было бы интересно
Total votes 1: ↑1 and ↓0+1
подскажите где разместить пример, хостинг для такого рода вещей чтоли, а вот примеры вставки в хтмл подготовил — но теперь кармы не хватает поправить пост :(
Total votes 1: ↑1 and ↓0+1
Ну про то как подключать скрипт в хеаде и то что это делается после подключения 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>
Total votes 1: ↑0 and ↓1-1
Этот пример семантически более правильный, но сложнее в верстке:
  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>

This comment wasn’t rated yet0
Минимум что требуется в CSS — это прописать display:none для блоков с контентом табов, у них появится класс «inactive».
This comment wasn’t rated yet0
А чем он лучше UI tabs? (с jquery только первую неделю работаю, так-что уж простите если для кого-то разница очевидна).
Total votes 1: ↑1 and ↓0+1
Лучше или хуже зависит от задач, которые вы решаете. Этот работает с jQuery 1.3+, не требует расширенной библиотеки jQuery UI, мало весит, но намного проще по функционалу. Если требуется динамическое добавление табов, навешивание обработчиков событий на табы, а также планируется плотная работа с другими компонентами UI — очевидно мое решение не подойдет. Задача этого скрипта «только сделать табы» без лишнего кода. Я буду и дальше его развивать в сторону уменьшения количества кода и повышения удобства использования.
Total votes 1: ↑1 and ↓0+1
Спасибо за объяснение :)
This comment wasn’t rated yet0
а что такое «Скрипт неразрушающий»?
This comment wasn’t rated yet0
Смысл в том что для работы скрипта не требуется писать никаких onclick, вносить какие-либо изменения в html, таким образом, при отсутствии поддержки JS — вся информация будет доступна. Кроме того скрипт не влияет на валидность HTML (даже в DOM). Подробнее тут написано.
This comment wasn’t rated yet0
Не пойму, а как заставить, чтоб по при загрузке открывалась не первая вкладка, а вторая-третья-десятая
This comment wasn’t rated yet0
Надо просто добавлять нужной вкладке класс «active» в хтмл.
This comment wasn’t rated yet0
вот почему то оно все же не хочет становится активной, т.е. первоначально при загрузке видно что вкладка активная, но когда происходит сам запуск скрипта
$(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>
This comment wasn’t rated yet0
Скрипт исправил. Ему достаточно найти у табов класс active, писать класс active у контентов и классы inactive у неактивных вкладок не обязательно.
This comment wasn’t rated yet0
29 строка
if ($(storage.tabs[i]).hasClass(this.activeLinkClass))

внутри метода initialize не видно this.activeLinkClass поэтому не происходит правильного срабатывания, нужно както по иному обращаться
как пока не понял сам не силен в jquery (
Total votes 1: ↑1 and ↓0+1
Исправил. Спасибо за найденный баг! Я это впрок написал, даже не тестил :)
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr