Гость
Статистика Форума
Последнии темы Популярные темы Лучшии пользователи Новые пользователи
» [17.11.2018] Группа Кровавой Дороги [ГКД] (0)
» [17.11.2018] Анимат на форуме для uCoz (0)
» [17.11.2018] Скрипт: Новости по теме для uCoz (0)
» [17.11.2018] Скрипт "Орфограф" beta для uCoz (0)
» [16.11.2018] Бар "100 Рентген" (3)
» [09.11.2018] Инверсия | Inversion (2)
» [09.11.2018] Как оформить тему? (0)
» [09.11.2018] S.T.A.L.K.E.R. 2 (1)
» [09.11.2018] Даты выхода модов Сталкер (2)
» [09.11.2018] N.I.K.S.O.N. MOD (ТЧ) (2)
» Тайники и подсказки (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 (2886)
» NL-Vincenz (11)
» Duzeppa26 (5)
» Ghosteron (4)
» Glomar (1)
» Бармен (1)
» Даниил_Хороший (1)
» marinak1984 (0)
» johnnym (0)
» LENA_D (0)
» [16.11.2018] d0om801
» [13.11.2018] parabranma
» [13.11.2018] doon80
» [12.11.2018] lemberg123
» [09.11.2018] alurongdannov
» [09.11.2018] NL-Vincenz
» [07.11.2018] eugen55eugen
» [07.11.2018] kadastrapro
» [22.10.2018] subbotin440
» [19.10.2018] goooooooooogle380

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

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

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

19:02