Табы (вкладки) для uCoz

Наверх!
Табы (вкладки) для uCoz
Демо Скачать
Доп. услуги

Описание

Как-то давно, лично у меня, была проблема с тем, что я не мог найти нормально рабочий плагин на вкладки.
Проблема в основном заключалась в том, что они либо криво вставали, либо конфликтовали, либо просто не работали (возможно из-за кривых, на тот момент, рук).

Так вот. Сейчас у меня, наконец-то, дошли руки до моих, собственных вкладок.
И сделал даже две стилизации: с горизонтальным и вертикальным расположением вкладок.

Установка:

Ну собстна, всё как всегда.
Это стили (CSS)
Код
.tabs-block {display: block; width: 100%; border-radius: 3px; overflow: hidden;}

.tab-link-block {display: block; width: 100%; background: #4184f3; overflow: hidden;}
.tab-link {padding: 0 10px; height: 50px; line-height: 50px; color: #bbb; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer;}
.tab-link:not(.active):hover {background: rgba(255,255,255,.1);}
.tab-link.active {background: rgba(255,255,255,.1); color: #fff;}

.tab-content-block {display: block; width: calc(100% - 20px); min-height: calc(50px - 20px); padding: 10px; background: #fefefe; color: #333;}
.tab-content:not(.active) {display: none;}

/* horizontal */
.tabs-block:not(.-vertical) .tab-link-block {height: 50px;}
.tabs-block:not(.-vertical) .tab-link-block::after {content: ''; display: block; clear: both;}
.tabs-block:not(.-vertical) .tab-link {display: inline-block; float: left; min-width: calc(50px - 20px); max-width: calc(150px - 20px); margin-right: 2px;}
.tabs-block:not(.-vertical) .tab-link.active {box-shadow: 0 -3px 0 0 #f4b142 inset;}
.tabs-block:not(.-vertical) .tab-link:last-child {margin-right: 0;}
/* horizontal */

/* vertical */
.tabs-block.-vertical {display: grid; grid-template-columns: 150px 1fr; grid-gap: 0;}
.tabs-block.-vertical .tab-link {display: block; width: calc(100% - 20px);}
.tabs-block.-vertical .tab-link.active {box-shadow: -3px 0 0 0 #f4b142 inset;}
/* vertical */

.tab-link {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; transition: all linear .2s;}


Это JQ скрипт (не забудьте подключить библиотеку JQ 1.9.1 или старше)
Код
$('.tabs-block .tab-link').on('click',function(){
  if(!$(this).hasClass('active')) {
  var parentTabs = $(this).closest('.tabs-block');
  parentTabs.find('.tab-link.active, .tab-content.active').removeClass('active');
  var elemIndex = $(this).index();
  $(this).addClass('active');
  parentTabs.find('.tab-content').eq(elemIndex).addClass('active');
  }
});


Ну и сам, HTML код, табов.

Это с горизонтальным расположением кнопок:
Код
<div class="tabs-block">
  <div class="tab-link-block">
  <div class="tab-link active">Первая вкладка</div>
  <div class="tab-link">Вторая вкладка</div>
  <div class="tab-link">Третья вкладка</div>
  </div>
  <div class="tab-content-block">
  <div class="tab-content active">1</div>
  <div class="tab-content">2</div>
  <div class="tab-content">3</div>
  </div>
</div>


А это с вертикальным.
Код
<div class="tabs-block -vertical">
  <div class="tab-link-block">
  <div class="tab-link active">Первая вкладка</div>
  <div class="tab-link">Вторая вкладка</div>
  <div class="tab-link">Третья вкладка</div>
  </div>
  <div class="tab-content-block">
  <div class="tab-content active">1</div>
  <div class="tab-content">2</div>
  <div class="tab-content">3</div>
  </div>
</div>


Как видите, разница только в том, что у вертикального есть класс -vertical.

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-58
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2018 года.
Дополнительно
Комментарии
Комментов нет.. Печально. Может оставишь свой коммент?
Комментарии могут оставлять только зарегистрированные пользователи.