Вкладки (табы) для uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Вкладки (табы) для uCoz


Нередко при создании или доработке дизайна мы хотим разместить большое количество информации на относительно небольшом участке в шаблоне. Как раз в этом нам с вами и помогут вкладки.
"Вкладки для uCoz" представляют собой своеобразный выступ с кратким заголовком, кликнув по которому отображается содержимое этой самой вкладки, но скрипт можно подогнать под себя и сделать не ограниченное количество вкладок. Например: данное решение можно использовать для виджетов ваших групп в социальных сетях. Возникнут вопросы, задавайте в коментах!

Код
<li><a href="#tab1">Заголовок вкладки</a></li>
где 1 - порядковый номер вкладки.

А после добавляем содержимое вкладки:
Код
<div id="tab1" class="tab_content">Содержимое вкладки</div>

В ваш CSS вставляем код:

Код
/* BSide tabs */
.tabs {
     list-style: none;
     height: 32px;
     border-bottom: 1px solid #e0e0e0;
     margin: 0;
     padding: 0;
}

.page_tabs {
     list-style: none;
     height: 32px;
     width: 100%;
     margin-top: 10px;
     margin-bottom: -20px;
     border-bottom: none;
}

.tabs li, .page_tabs li {
     margin: 0px;
     padding: 0px;
     float: left;
     height: 31px;
     line-height: 32px;
     border: 1px solid #e0e0e0;
     overflow: hidden;
     position: relative;
     background: #eaeaea url('http://webmaster-ucoz.ru/ucoz/1/1/tabs/tab-bg.png') repeat-x;
     margin-right: 2px;
     margin-bottom: -1px;     
     -webkit-border-top-right-radius: 4px;
     -webkit-border-top-left-radius: 4px;
     -moz-border-radius-topright: 4px;
     -moz-border-radius-topleft: 4px;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
}

.page_tabs li.active a {
     -webkit-border-top-right-radius: 4px;
     -webkit-border-top-left-radius: 4px;
     -moz-border-radius-topright: 4px;
     -moz-border-radius-topleft: 4px;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
}

.tabs li a, .page_tabs li a {
     font-weight: bold;
     color: #666666;
     text-decoration: none;
     display: block;
     padding: 0px 20px;
     outline: none;
}
.tabs li a:hover, .page_tabs li a:hover {
     color: #3DC0E0;
}

.tabs li.active, .tabs li.active a, .tabs li.active a:hover, .page_tabs li.active, .page_tabs li.active a, .page_tabs li.active a:hover  {
     color: #333333;
     background: #ffffff;
     border-bottom: 1px solid #ffffff;     
}

.tab_container {
     border: 1px solid #e0e0e0;
     border-top: none;
     overflow: hidden;
     margin-bottom: 20px;
     background: #ffffff;
     -webkit-border-bottom-right-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-bottomright: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
}

.tab_content {
     margin: 19px; /* 20 - border */
}

В то место, где хотите видеть вкладки, вставляем код:
Код
<ol class="tabs">  <li><a href="#tab1">Первая</a></li>  <li><a href="#tab2">Вторая</a></li>  <li><a href="#tab3">Третья</a></li>  <li><a href="#tab4">Четвёртая</a></li> </ol>  <div class="tab_container"> <div id="tab1"class="tab_content"> Содержимое первой вкладки </div> <div id="tab2"class="tab_content"> Содержимое второй вкладки </div> <div id="tab3"class="tab_content"> Содержимое третьей вкладки </div> <div id="tab4"class="tab_content"> Содержимое четвёртой вкладки </div> </div>

Вставляем этот код перед тегом </body>
Код
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/1/tabs/tabs.js"></script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 09.07.2015 в 00:00
Материал просмотрен: 2745 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 5 комментариев

Пожаловаться
Сказать спасибо
Источник

5 комментариев


Bobwelder
Владимир @Bobwelder 18.10.2015 20:141
0
в коде "AHref" слитно в двух табах прописано, и табы не работают исправьте пробелами , а так супер, забрал себе
Ромчик
Спасибо, баги исправлены!
avatar
Скажите, пожалуйста, как сделать чтобы при переходе между вкладками страница перезагружалась?
Ромчик
Это табы, а не меню.
avatar
Плохо что не адаптивные вкладочки.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта