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

Добавляем к себе на сайт,легкие,простые ,адаптивные вкладки-табы

irbees2008 irbees2008 Опубликовано - 8 - февраля JS
3710 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Представляю вам самый лёгкий плагин jQuery для создания вкладок (табов),где скачал не помню,просто разбирал архивы на компе,и решил выложить,может кому приглянется.
Приступим
1.Для начала скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,хотя он нам не очень и нужен,все можно прописать уже в имеющиеся файлы шаблона.
2.Подключаем стили,
а) Залить папку стиля в папку шаблона и подключить его в main.tpl в секцию head

Код:
<link rel="stylesheet" href="{{ tpl_url }}/css/tabs.css" media="all" />
б) Взять содержимое файла tabs.css и добавить в файл стилей вашего шаблона
Код:
/* базовый контейнер вкладок */
.tabs_block {
width: 100%;
max-width: 600px;
min-width: 300px;
margin: 0 auto;
}
.tabs_block:after {
content:"";
display:block;
clear:both;
}
/* панель навигации вкладок */
.tabs {
margin: 0;
padding: 0;
list-style: none;
float:left;
}
/* список вкладок */
.tabs li {
text-align:center;
float:left;
padding:8px 15px;
background:#48c3d6;
margin-right:1px;
cursor:pointer;
color:#fff;
-webkit-transition:all .2s linear 0s;
-webkit-transition-delay:.2s 0s;
transition:all .2s linear 0s;
}
/* активная вкладка */
.tabs li.active {
background:#fdfdfd;
color:#4F5559;
}
/* блоки вкладок с содержанием */
.box {
background:#fdfdfd;
width:96%;
padding:5px 2% 6px;
display:none;
text-align: left;
float: left;
}
/* параграф внутри вкладок */
.box p {
margin-bottom: 15px;
}
/* активный блок при загрузке */
.visible, .open_tab {
display: block;
}
/* картинки внутри вкладок */
.box img {
width: 25%;
height: auto;
}
/* картинки слева */
.pl-left {
float:left;
margin:5px 15px 5px 0;
}
/* картинки справа */
.pl-right {
float:right;
margin:5px 0 5px 15px;
}
/* убираем выравнивание на маленьких экранах */
@media (max-width: 300px) {
.tabs, .tabs li {
float: none;
}
}
3. Подключаем скрипты
а) Заливаем папку js в папку шаблона и подключаем скрипт в main.tpl в секцию head
Код:
<script type="text/javascript" src="{{ tpl_url }}/js/tabs.js"></script>
б) Копируем содержание файла tabs.js и добавляем в любой скрипт вашего шаблона.
в) Добавляем в main.tpl скрипт показанный ниже
Код:
(function($) {  
$(function() {

$('ul.tabs').on('click', 'li:not(.current)', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
})

})
})(jQuery)
4.Ну и сами наши вкладки
Код:
<div class="tabs_block">
<ul class="tabs">
<li class="active">Вкладка1</li>
<li>Вкладка2</li>
<li>Вкладка3</li>
</ul>
<div class="box visible">
<p>Содержание здесь.... </p>
</div>
<div class="box">
<p>Содержание2 здесь.... </p>
</div>
<div class="box">
<p>Содержание3 здесь.... </p>
</div>
</div>
5.Вот и все ,если не работает проверьте подключен у вас скрипт jQuery,если что не понятно пишите.

Можешь почитать и вот эту статейку "Плагин ognews"

Опрос

Ваше мнение

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

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [14]
  • Гости: [13]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 35
  • Генерация страницы: 0.407сек
  • Потребление памяти: 5.171 Mb 
  •   Яндекс.Метрика