Гость
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Скрипты для uCoz » Вкладки (табы) для uCoz
Вкладки (табы) для uCoz
Xemordio Offline Дата: Четверг, 11.10.2018, 19:45 | Сообщение # 1
Администратор
Звание: Маршал [?]
Сообщений: 3489

Нередко при создании или доработке дизайна мы хотим разместить большое количество информации на относительно небольшом участке в шаблоне. Как раз в этом нам с вами и помогут вкладки.

"Табы" представляют собой своеобразный выступ с кратким заголовком, кликнув по которому отображается содержимое этой самой вкладки.
В исходном файле 4 вкладки, но их количество очень просто изменить. Для этого сначала добавляем заголовок вкладки:
Код
<li><a href="#tab1">Заголовок вкладки</a></li>

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

где 1 - порядковый номер вкладки.
Аналогично с удалением - сначала заголовок, а затем содержимое.

Установка CSS
Теперь начинаем установку на сайт. Копируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)
Код
.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://mvcreative.ru/example/18/images/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 */ }


Установка HTML
Этот код копируем и вставляем в любое удобное для вас место. Ширина блока с вкладками зависит от блока, в котором они находятся.
Код
<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>


Установка JS
Вставляем этот код перед тегом </body>.
Код
<script type="text/javascript" src="http://mvcreative.ru/example/18/js/tabs.js"></script>

Установка скрипта вкладок на этом завершена.

[grayb]Скачать с ЯндекДиска[/grayb]
Дата регистрации: 22.07.2017
Форум » Web-Раздел » Скрипты для uCoz » Вкладки (табы) для uCoz
  • Страница 1 из 1
  • 1
Поиск:

Обновленные темы

Мини-чат

Лучшие пользователи

Xemordio REP: 11[3489]
Infe[R]nos REP: 5[38]
Бармен REP: 7[28]
StraNNik REP: 1[25]
NL-Vincenz REP: 0[12]
Waldemar REP: 0[12]
Razilator REP: 14[7]
Ghosteron REP: 3[6]
LENA_D REP: 0[5]
Duzeppa26 REP: 4[5]

Статистика форума

Темы: 2433
Всего постов: 3630
Новый юзер:arsenijzigulin9