Хаки и Скрипты Next Generation CMS : JS, Интерфейс : Добавляем к себе на сайт,легкие,простые ,адаптивные вкладки-табы

irbees2008 Опубликовано - 8 - февраля JS

Адаптировал: 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,если что не понятно пишите.

Можешь почитать и вот эту статейку "Бегущая строка на Jquery с эффектом набора текста"

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

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