Маленький jQuery плагин для создания, так называемых «вкладок».
Ключевые особенности
- семантическая чистота вашего HTML-кода
- малый размер плагина(819 байт)
- простота использования
Скачать
- jquery.semanticTabs.min.js - сжатая версия
- jquery.semanticTabs.js - исходный код с комментариям
Пример использования
<style>
/* Tabs block
------------------------------ */
.b-tabs { margin: 0 0 20px 0; }
.b-tabs-nav {
overflow: hidden;
margin: 0 0 9px 0;
background: #ccc;
padding: 4px 4px 0 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
.b-tabs-nav li {
float: left;
margin: 0 4px 0 0;
list-style: none;
padding: 0 16px;
line-height: 28px;
background: #eee;
border-width: 1px 1px 0 1px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
color: #333;
cursor: pointer;
}
.b-tabs .b-tabs-cur {
background: #f2f2f5;
color: #000;
font-weight: bold;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://github.com/agat/jQuery-Semantic-Tabs/raw/master/js/jquery.semanticTabs.min.js"></script>
<script>
$(function() {
$('.b-tabs').semanticTabs({
tabSelector: '> h2',
bodySelector: '> div'
});
});
</script>
<div class="b-tabs">
<h2>Tab 1</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<h2>Tab 2</h2>
<div>
<p>Mauris a lorem enim. Phasellus mollis quam vestibulum libero cursus dignissim...</p>
</div>
<h2>Tab 3</h2>
<div>
<p>Pellentesque pulvinar, ipsum ac molestie rhoncus, turpis...</p>
</div>
</div><!-- b-tabs -->
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan gravida luctus. Nunc vel magna lectus. Vivamus quam odio, cursus vel egestas eget, sagittis in nisl. In ac aliquam urna. Nunc vel adipiscing augue. Phasellus feugiat volutpat vestibulum. Donec auctor, risus et ullamcorper tempus, purus metus scelerisque nunc, non tempus erat sapien a augue.
Nam mattis ornare mi, a faucibus purus posuere eget. In massa sem, feugiat id rutrum et, elementum ut eros.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Tab 2
Mauris a lorem enim. Phasellus mollis quam vestibulum libero cursus dignissim.
Pellentesque vehicula metus nec purus commodo at dapibus lectus egestas. Aliquam vel orci est, elementum ultrices libero. Proin eu bibendum mi.
Morbi pharetra mollis metus, non ultrices quam vehicula vitae. Sed eget odio consequat odio fringilla sodales. Phasellus feugiat volutpat vestibulum. Donec auctor, risus et ullamcorper tempus, purus metus scelerisque nunc, non tempus erat sapien a augue.
Tab 3
Pellentesque pulvinar, ipsum ac molestie rhoncus, turpis nisi tristique lectus, vitae fringilla sapien tellus ornare nunc.
In vel lorem nisl. Phasellus feugiat volutpat vestibulum. Donec auctor, risus et ullamcorper tempus, purus metus scelerisque nunc, non tempus erat sapien a augue. Quisque tempor, diam congue fringilla consectetur, ligula tortor ultrices lacus, vehicula porta nisl dolor eget diam.
Nulla nec diam turpis. Maecenas gravida posuere suscipit.
HTML до работы jQuery Semantic Tabs
<dl class="b-tabs"> <dt>Tab 1</dt> <dd> <p>Lorem ipsum dolor sit amet...</p> </dd> <dt>Tab 2</dt> <dd> <p>Lorem ipsum dolor sit amet...</p> </dd> </dl><!-- b-tabs-dl -->
HTML после работы jQuery Semantic Tabs
<script>
$(function() {
$('.b-tabs').semanticTabs();
});
</script>
<dl class="b-tabs">
<ul class="b-tabs-nav">
<li class="b-tabs-cur"><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
</ul>
<dd style="display: block;">
<p>Lorem ipsum dolor sit amet...</p>
</dd>
<dd style="display: none;">
<p>Lorem ipsum dolor sit amet...</p>
</dd>
</dl><!-- b-tabs-dl -->
Плагин изменяет структуру DL-списка для более удобного создания навигации по нему.
Если JavaScript не работает, структура списка остается семантически прозрачной для клиента.
Настройки
- tabSelector - string, '> dt'
-
CSS-селектор для выборки элементов, участвующих в построении навигации.
- bodySelector - string, '> dd'
-
CSS-селектор для выборки элементов c содержимым вкладки.
// навигационный список составляется из тагов заголовков(h2), // а содержимое вкладки заключено в div-таг $('.b-tabs').semanticTabs({ tabSelector: '> h2', bodySelector: '> div' }); - tabsCSSClass - string, 'b-tabs'
- CSS-класс, который будет применён к элементу без своего класса.
- tabsNavSuffix - string, '-nav'
-
Суффикс CSS-класса для навигационного списка. Полное имя класса складывается из имени класса блока с вкладками и суффикса навигации.
- tabsNavActiveSuffix - string, '-cur'
-
Суффикс CSS-класса для активной вкладки навигационного списка. Полное имя класса складывается из имени класса блока с вкладками и суффикса активной вкладки.