Гость
Статистика Форума
Последнии темы Популярные темы Лучшии пользователи Новые пользователи
» [22.01.2019] Сталкерское меню как на STALKER-ZONE (0)
» [20.01.2019] Контент блоки Сталкер // Content block stalker (12)
» [17.01.2019] Распознание шрифта на картинке (1)
» [16.01.2019] Новый Арсенал 5.1 (Перезагрузка) (1)
» [15.01.2019] CS:GO Menu Screen CSS (0)
» [15.01.2019] CSGO Killfeed CSS (0)
» [12.01.2019] Mario Kart DS (0)
» [12.01.2019] Вид материалов в стиле «Кирпичная кладка» для u... (0)
» [12.01.2019] Новый вид комментариев для uCoz (0)
» [12.01.2019] Система уровней пользователей для uCoz (0)
» Тайники и подсказки (82)
» FAQ прохождения по локациям DOPPELGANGER 7.63 Time Gap (50)
» Русскоязычное руководство по моду Frackin' Universe... (38)
» Фоны для сталкерского сайта (32)
» [DMX] Народное творчество (24)
» Capital-Rp Wikia Code (22)
» ГИД Прохождение остальных квестов ОП - 2 (21)
» CoC Вылеты и их решение (21)
» Личные сообщения (18)
» Редактирование мода «Народная солянка Объединенный пак ... (18)
» Xemordio (3123)
» NL-Vincenz (12)
» Infe[R]nos (7)
» Duzeppa26 (5)
» Ghosteron (4)
» Даниил_Хороший (1)
» gromgold (1)
» ZION (1)
» kamelotto (1)
» Бармен (1)
» [19.01.2019] gavyxte
» [18.01.2019] Sedoy
» [17.01.2019] Nik_nikolaev2k18
» [13.01.2019] dextyar96
» [09.01.2019] max202
» [07.01.2019] Infe[R]nos
» [06.01.2019] zgenaz
» [01.01.2019] iivelesii
» [28.12.2018] sas555555
» [27.12.2018] iano1

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

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

"Табы" представляют собой своеобразный выступ с кратким заголовком, кликнув по которому отображается содержимое этой самой вкладки.
В исходном файле 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 » Вкладки (табы) для uCoz
  • Страница 1 из 1
  • 1
Поиск:

12:15