Pull to refresh

Comments 17

Хорошо бы еще ссылочку на работающий пример.
Даешь ссылку! Как раз сейчас занимаюсь табами на ui. Было бы интересно
подскажите где разместить пример, хостинг для такого рода вещей чтоли, а вот примеры вставки в хтмл подготовил — но теперь кармы не хватает поправить пост :(
Ну про то как подключать скрипт в хеаде и то что это делается после подключения 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».
А чем он лучше UI tabs? (с jquery только первую неделю работаю, так-что уж простите если для кого-то разница очевидна).
Лучше или хуже зависит от задач, которые вы решаете. Этот работает с jQuery 1.3+, не требует расширенной библиотеки jQuery UI, мало весит, но намного проще по функционалу. Если требуется динамическое добавление табов, навешивание обработчиков событий на табы, а также планируется плотная работа с другими компонентами UI — очевидно мое решение не подойдет. Задача этого скрипта «только сделать табы» без лишнего кода. Я буду и дальше его развивать в сторону уменьшения количества кода и повышения удобства использования.
Смысл в том что для работы скрипта не требуется писать никаких onclick, вносить какие-либо изменения в html, таким образом, при отсутствии поддержки JS — вся информация будет доступна. Кроме того скрипт не влияет на валидность HTML (даже в DOM). Подробнее тут написано.
Не пойму, а как заставить, чтоб по при загрузке открывалась не первая вкладка, а вторая-третья-десятая
Надо просто добавлять нужной вкладке класс «active» в хтмл.
вот почему то оно все же не хочет становится активной, т.е. первоначально при загрузке видно что вкладка активная, но когда происходит сам запуск скрипта
$(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>
Скрипт исправил. Ему достаточно найти у табов класс active, писать класс active у контентов и классы inactive у неактивных вкладок не обязательно.
29 строка
if ($(storage.tabs[i]).hasClass(this.activeLinkClass))

внутри метода initialize не видно this.activeLinkClass поэтому не происходит правильного срабатывания, нужно както по иному обращаться
как пока не понял сам не силен в jquery (
Исправил. Спасибо за найденный баг! Я это впрок написал, даже не тестил :)
Only those users with full accounts are able to leave comments. Log in, please.