• 3344
  • 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Сегодня хочу рассказать о небольшом jQuery скрипте, который позволяет создавать на страницах простые вкладки. Сам скрипт называется Tabify. Чтобы создать на вашей странице вкладки, достаточно просто подключить библиотеку jQuery и скрипт Tabify. Оформление вкладок, как всегда будем описывать правилами CSS.
Jquery плагин Tabify позволяет вам легко создавать вкладки с любым содержанием. Основное различие между конкурентами и Tabify, является его малый размер.

Как использовать Tabify
1. для начала разметка блока, содержащего вкладки.

Код:
<div id="tabs"><!-- вкладки -->
<ul>
<li class="active"><a href="#pane1">Вкладка 1</a></li>
<li><a href="#pane2">Вкладка 2</a></li>
<li><a href="#pane3">Вкладка 3</a></li>
</ul>
<div id="panes"><!-- контейнер для панелей -->
<!-- панель для вкладки 1 -->
<div id="pane1" class="tab">
<p>Текст вкладки 1 ...</p>
</div>
<!-- панель для вкладки 2 -->
<div id="pane2" class="tab">
<p>Текст вкладки 2 ...</p>
</div>
<!-- панель для вкладки 3 -->
<div id="pane3" class="tab">
<p>Текст вкладки 3 ...</p>
</div>
</div><!-- контейнер для панелей -->
</div><!-- вкладки -->
Обратите внимание на начальную вкладку, которая обозначена слассом class="active". Скрипт jQuery будет в дальнейшем переназначать этот красс на вкладку, по который был клик мышки.
Эта структура будет работать сразу, после подключения скрипта.
2. скачать Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковать ,залить и затем подключим скрипты, которые нам необходимы.У многих скрипт jquery подключен,повторно подключать не надо
Код:
<script type="text/javascript" src="{tpl_url}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="{tpl_url}/js/jquery.tabify.js"></script>
3. вызываем функцию управления вкладками для нашего тега
Код:
<div id="tabs">
.

Код:
<script type="text/javascript">

$(document).ready(function () {
$('#tabs').tabify();
});

</script>

4. И последнее CSS
Код:
/* общий конейнер с вкладками */
#tabs{
display:block;
margin-top:20px;
clear:both;
}
/* немаркированный список заголовка */
#tabs ul{
display:block;
height:auto;
margin:0;
padding:0;
margin-top:10px;
font-size: 12px;
list-style:none;
}
/* элемент списка */
#tabs ul li {
margin:0;
padding:0;
float:left;
}
/* ссылка заголовка вкладки */
#tabs ul li a {
display:block;
margin:0;
margin-right:2px;
padding:10px 15px;
float:left;
color: #ddd;
background-color:#56585d;
text-decoration:none;
/* стили CSS3 для закругления уголков */
-webkit-border-top-left-radius: 8px; /* Safari, Chrome */
-webkit-border-top-right-radius: 8px; /* Safari, Chrome */
-khtml-border-top-left-radius: 8px; /* KHTML */
-khtml-border-top-right-radius: 8px; /* KHTML */
-moz-border-radius-topleft: 8px; /* Firefox */
-moz-border-radius-topright: 8px; /* Firefox */
border-top-left-radius: 8px; /* CSS3 */
border-top-right-radius: 8px; /* CSS3 */

}
/* наведение мышки на вкладку */
#tabs ul li a:hover {
color:#FFF;
background-color:#121518;
text-decoration:none;
}
/* активная вкладка */
#tabs ul .active a,
#tabs ul .active a:hover {
font-weight:bold;
color:#121518;
background-color:#e5e5e5;
text-decoration:none;
border:none;
border-bottom:2px solid #e5e5e5;
-webkit-text-shadow: 0px 1px 1px #fff;
-moz-text-shadow: 0px 1px 1px #fff;
text-shadow: 0px 1px 1px #fff;

}
/* контейнер с панелями вкладок */
#tabs #panes {
margin:0;
padding:0;
clear:both;
display:block;
background-color:#e5e5e5;
/* стили CSS3 для закругления уголков */
-webkit-border-radius: 8px; /* Safari, Chrome */
-webkit-border-top-left-radius: 0px; /* Safari, Chrome */
-moz-border-radius: 8px; /* Firefox */
-moz-border-radius-topleft: 0px; /* Firefox */
border-radius: 8px; /* CSS3 */
border-top-left-radius: 0px; /* CSS3 */
}
/* оформление вкладок */
#tabs #panes .tab {
margin:0;
display:block;
padding:20px;
clear:both;
}
После этого получаем красивые рабочие вкладки, созданные при помощи CSS и jQuery

Можешь почитать и вот эту статейку "Анимированная,пульсирующая кнопка "Записаться""

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

На каком движке ваш сайт?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element