Гость
Статистика Форума
Последнии темы Популярные темы Лучшии пользователи Новые пользователи
» [18.10.2018] Системные требования Call of Chernobyl (0)
» [18.10.2018] [CoC] Ответы на вопросы (1)
» [18.10.2018] [CoC] F.A.Q (0)
» [18.10.2018] CoC Вылеты и их решение (21)
» [18.10.2018] Choice of Destiny (0)
» [17.10.2018] Тайники мода "Смерти Вопреки - Послушник&q... (0)
» [17.10.2018] Прохождение + Гид «Смерти Вопреки» Часть 1 (0)
» [16.10.2018] Поставить визуальный редактор на сайт (0)
» [15.10.2018] Гид по прохождению новых заданий мода "Ein... (0)
» [15.10.2018] Прохождение мода Долина Шорохов (0)
» Тайники и подсказки (82)
» FAQ прохождения по локациям DOPPELGANGER 7.63 Time Gap (50)
» Русскоязычное руководство по моду Frackin' Universe... (38)
» Фоны для сталкерского сайта (32)
» Capital-Rp Wikia Code (22)
» ГИД Прохождение остальных квестов ОП - 2 (21)
» CoC Вылеты и их решение (21)
» Личные сообщения (18)
» Редактирование мода «Народная солянка Объединенный пак ... (18)
» Проблемы в модуле "Пользователи" (17)
» Xemordio (2865)
» Duzeppa26 (5)
» Ghosteron (4)
» Даниил_Хороший (1)
» Glomar (1)
» Бармен (1)
» Yuri_Geruk (0)
» Razilator (0)
» oleg101 (0)
» nitro-oc (0)
» [09.10.2018] AleksStal
» [05.10.2018] Surin_Oleg
» [04.10.2018] artyomsamokhin
» [28.09.2018] Ната
» [27.09.2018] ExtremeBass
» [26.09.2018] jivago
» [21.09.2018] kures80
» [16.09.2018] marinak1984
» [15.09.2018] johnnym
» [09.09.2018] LENA_D

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

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

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

06:15