JTABS - ПЛАГИН ВКЛАДОК

+ -
0
JTABS - ПЛАГИН ВКЛАДОК


jTabs - плагин вкладок использующий jQuery.

Разметка HTML
    <ul class="tabs">  
        <li class="active"><a href="#">Вкладка 1</a></li>
        <li><a href="#">Вкладка 2</a></li>
        <li><a href="#">Вкладка 3</a></li>
    </ul>  
    <div class="clear"></div>
    <div class="tabs_content">
        <div>Содержимое первой вкладки</div>
        <div>Содержимое второй вкладки</div>
        <div>Содержимое третьей вкладки. И ещё разок повторим. Это содержимое третьей вкладки.</div>
    </div><!-- tabs content -->


CSS
И стилизация вкладок, которую можно использовать в качестве базы:
ul.tabs {list-style:none; width:500px;}
ul.tabs li:first-child {border-left:1px solid #ccc;}
ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;}
ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;}
ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
ul.tabs li.active a {font-weight:600; color:#000;}
div.tabs_content {width:500px; border:1px solid #ccc;}
div.tabs_content > div {padding:20px; display:none;} /* suggested to use display:none so that if the html is very long it wont jump badly */


javascript
Подключаем jQuery библиотеку, далее плагин и инициализируем его:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jTabs.js"></script> 
<script>
$(document).ready(function(){
    $("ul.tabs").jTabs(&#123;content: ".tabs_content", animate: true});                       
});
</script>

Опции
- content - элемент, который будет содержать DIVы с содержимым каждой вкладки.
- equal_height - true/false, находит наибольшую высоту вкладки и все остальные вкладки подстраивает под эту высоту.
- cookies - true/false, будет использовать cookies браузера для сохранения активности вкладки, которую выбирал пользователь.
- animate - true/false, включение анимации при переключении вкладок.
- effect - эффект, который будет использоваться для анимации (по умолчанию fade), можно использовать slide.
- speed - если у вас включена анимация, то можно указать её скорость в мс

Скачать исходник:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 1

Рафаэль
Рафаэль 30 марта 2015 07:22
Покажите пример использоватие табов с куками