• Страница 1 из 1
  • 1
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Табы для uCoz
Табы для uCoz
XemorDioДата: Понедельник, 04.04.2016, 12:53 | Сообщение # 1
Генерал-полковник
Группа: Пользователи
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Offline

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

В исходном файле 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
Для того что бы наши вкладки начали функционировать примени к ним JavaScript который установим перед тегом .
Код
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tabs li:first-child").addClass("active");
$(".tab_content:first-child").show();
$(".tabs li").click(function() {
if (!$(this).hasClass("active")) {
$(this).parent().find("li").removeClass("active");
$(this).parent().next().find(".tab_content").hide();

var activeTab = $(this).find("a").attr("href");
$(this).addClass("active");
$(this).parent().next().find(activeTab).fadeIn();
}
return false;
});
});
</script>


Установка скрипта на этом завершена.
 
Форум Сталкер » Web-раздел » Скачать скрипты для сталкера » Табы для uCoz
  • Страница 1 из 1
  • 1
Поиск:
Поделись с другими сталкерами
Меню сайта
Гость
Статистика
Рейтинг@Mail.ru