Табслайдер
Табслайдер – является одним из самых распространенных плагинов, есть множество вариантов
написания этого плагина. Наиболее часто для этого используется “Coda-Slider“, он хорошо отлажен, багов в работе я не замечал, вообщем хороший плагин, но есть минус из-за которого я написал свой, а именно он генерирует половину HTML кода сам, что очень затрудняет установку под конкретный дизайн.
Пример №1
Требования HTML/CSS верстки для плагина
Жестких требований к структуре HTML кода нет, есть некоторые обязательные свойства в CSS.
HTML код (рекомендованый к плагину)
<ul class="tabset">
<li><a href="#" class="active">Таб 1</a></li>
<li><a href="#">Таб 2</a></li>
<li><a href="#">Таб 3</a></li>
<li><a href="#">Таб 4</a></li>
</ul>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>
<div class="tab-holder">
<ul>
<li>
<img src="images/pic01-small.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetuer ...
dolore magna aliquam erat volutpat. ...
lobortis nisl ut aliquip ex ea commodo ...
</p>
</li>
......
<li>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing ...
dolore magna aliquam erat volutpat. Ut wisi ...
lobortis nisl ut aliquip ex ea commodo consequat. ...
</p>
</li>
</ul>
</div>
</div>
Соответственно для этого кода я применил такие CSS свойства:
Выделю только обязательные свойства
position:relative;
overflow:hidden;
}
#tabs ul {
width:9999px;
}
.tab-holder {
width:540px;
overflow:hidden;
}
.tab-holder li {
width:520px;
padding:10px;
float:left;
}
Что из этого можно заметить.
Для #tabs установлено свойство position:relative;, а сделано это из-за того что в IE6 есть баг – когда внутри у какого-нибудь элемента есть position:relative; то overflow:hidden; не помогает, не обрезает контент внутри обертки, соответственно это помогает избежать этого бага.
Для UL ширина ставится длинной, что бы слайд элементы выстраивались друг за другом.
для того что б слайд-элементы слайдились корректно ширина обертки (.tab-holder) должна быть равной слайд-элементу (.tab-holder li)
Теперь подробнее по JS
Подключаем JavaScript
<script type="text/javascript" src="js/jquery.tabSlide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabSlide({
btPrev: 'a.prev',
btNext: 'a.next',
tabs: 'ul.tabset a',
holderList: 'div',
scrollElParent: 'ul',
scrollEl: 'li',
duration: 1000,
autoSlide: false,
startAfterClick: false,
otherLinks:false,
animateContentHeight:false
});
});
</script>
Детальнее по параметрам:
- btNext- селектор для кнопки ‘Next’
- btPrev- селектор для кнопки ‘Previos’
- tabs- селектор табов
- holderList- селектор обертки для слайд-элементов
- scrollElParent- селектор родителя слайд-элементов
- scrollEl- селектор слайд-элементов
- duration- время прокрутки в миллисекундах
- autoSlide- параметр по умолчанию false, но можно указать миллисекунды для автоматической прокрутки
- startAfterClick- параметр для возобновления автослайда через некоторое время после клика на табы и стрелочки
- otherLinks- селектор для ссылок, которые тоже могут переключат табы (в href ссылки нужно указать номер таба, например #3)
- animateContentHeight- true для плавного изменения высоты таба
Пример с автослайдом:
Скачать плагин
Change log:
16 Коментариев to Табслайдер
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Просто бомба, спасибо =)
Класс себе поставлю!Спасибо)
Отличная вещь, как установить таймер на прокрутку слайдов?
В параметре autoSlide вместо false поставить значение в миллисекундах (например 5000 – 5сек)
А как быть если нужно больше табов?
просто добавляете блоки: количество табов должно быть равным количеству слайдов
Как заставить работать этот плагин вместе с mootools.js?
$j = jQuery.no Conflict();
Не работает автор HELP!!!
По коду, что вы написали – все верно, тут проблема скорее в самом плагине, в файле jquery.tabSlide.js замените все $ на jQuery. После этого jQuery.noConflict(); должен работать.
а как убрать автоматический переход к первому\последнему табу, при кликах на стрелки?
В этой версии плагина это не предусмотрено… появится в следующей ;)
Как выставить его на страницу?
Об этом я написал в статье… нужно сверстать блок в HTML/CSS и подключить JS
А когда планируется следующая версия?
P.S. Было бы круто, чтобы прокручивалось по кругу… =)
:) как только будет свободное время или как-только самому понадобится такая фича в ближайших проектах
Возникла маленькая проблема, 1 строчка файла jquery.tabSlide.js, то есть jQuery.extend() и тд вызывает ошибку из-за которой невозможно использование эффекта .animate, а соответственно без этой первой строчки плагин не работает.
ЗЫ, решил проблему, закомментировав изменения swing. (ибо в анимейте пользовался именно им)