Хаки и Скрипты Next Generation CMS

Вкладки-Табы на jQuery и CSS

irbees2008 irbees2008 Опубликовано - 9 - июня JS
5131 - 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

Можешь почитать и вот эту статейку "HTML 5 теги"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 671
  • Онлайн всего: [39]
  • Гости: [38]
  • Поисковики: [1] Google
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 31
  • Генерация страницы: 0.328сек
  • Потребление памяти: 5.375 Mb 
  •   Яндекс.Метрика