Поздравляем!

Поздравления родным и друзьям



Мои Интересы

Поиск по сайту

Связь, инфо

РЕКЛАМА

Мое фото увлечение

Аквариум
Закругляем углы на CSS

Погода
Погода от Метеоновы
Рига+17облачно, небольшой дождь
758 мм, 51%, С-З,5-9 м/с
Бирмингем+18облачно
6 сентября, четверг
 Погода с разных источников>>>  

Закругляем углы на CSS
Страница 1 из 11
Форум » Все для дизайна сайтов Ucoz » Скрипты » TabControl
TabControl
ВикторияДата: Понедельник, 06.05.13, 15:55 | Сообщение # 1
Основатель сайта
Сообщений: 376

Имя: Виктория Ермакова
Страна: Латвия
Город: Rīga
Skype: vikajura1819

Награды: 2
Репутация: 6
Установка
1. Загружаем прикрепленный файл tables.js в папку js на своем сайте.

2. Переходим в режим редактирование CSS кода (ПУ » Управление дизайном » Редактирование шаблонов » Таблица стилей (CSS)), в самое начало вставляем следующий код

Код
/* TabControl Start */   
p {padding: 7px 0;}   
.sectiontable {   
          width: 100%;   
          background: #EFEFEF;   
          margin: 0 0 30px;   
}   
ul.tabs {   
          height: 28px;   
          line-height: 25px;   
          list-style: none;   
          border-bottom: 1px solid #DDD;   
          background: #FFF;   
}   
.tabs li {   
          float: left;   
          display: inline;   
          margin: 0 1px -1px 0;   
          padding: 0 13px 1px;   
          color: #777;   
          cursor: pointer;   
          background: #F9F9F9;   
          border: 1px solid #E4E4E4;   
          border-bottom: 1px solid #F9F9F9;   
          position: relative;   
}   
.tabs li:hover,   
.vertical .tabs li:hover {   
          color: #F70;   
          padding: 0 13px;   
          background: #FFFFDF;   
          border: 1px solid #FFCA95;   
}   
.tabs li.current {   
          color: #444;   
          background: #EFEFEF;   
          padding: 0 13px 2px;   
          border: 1px solid #D4D4D4;   
          border-bottom: 1px solid #EFEFEF;   
}   
.box {   
          display: none;   
          border: 1px solid #D4D4D4;   
          border-width: 0 1px 1px;   
          background: #EFEFEF;   
          padding: 0 12px;   
}   
.box.visible {   
          display: block;   
}   

.section.vertical {   
          width: 440px;   
          border-left: 160px solid #FFF;   
}   
.vertical .tabs {   
          width: 160px;   
          float: left;   
          display: inline;   
          margin: 0 0 0 -160px;   
}   
.vertical .tabs li {   
          padding: 0 13px;   
          margin: 0 0 1px;   
          border: 1px solid #E4E4E4;   
          border-right: 1px solid #F9F9F9;   
          width: 132px;   
          height: 25px;   
}   
.vertical .tabs li:hover {   
          width: 131px;   
}   
.vertical .tabs li.current {   
          width: 133px;   
          color: #444;   
          background: #EFEFEF;   
          border: 1px solid #D4D4D4;   
          border-right: 1px solid #EFEFEF;   
          margin-right: -1px;   
}   
.vertical .box {   
          border-width: 1px;   
}   
/* TabControl End */

Сохраняем.

3. В шаблоне, где собираетесь использовать TabControl, перед </body> вставляете приведенный ниже код

Код
<script type="text/javascript" src="/js/tables.js"></script>

4. В нужно месте вставляете следующий код 
Код
<div class="sectiontable">   
          <ul class="tabs">   
           <li class="current">Первая вкладка</li>   
           <li>Вторая вкладка</li>   
          </ul>   

          <div class="box visible">   
           <p>Содержимое вкладки #1</p>   
          </div>   

          <div class="box">   
           <p>Содержимое вкладки #2</p>   
          </div>   
</div>

4. Классы:
current - показывает вкладку активной
box visible - показывает содержимое нужной вкладки
 

ВикторияДата: Понедельник, 06.05.13, 16:00 | Сообщение # 2
Основатель сайта
Сообщений: 376

Имя: Виктория Ермакова
Страна: Латвия
Город: Rīga
Skype: vikajura1819

Награды: 2
Репутация: 6
Больше вкладок


Код
<div class="sectiontable">   
<ul class="tabs">   
<li class="current">Первая вкладка</li>   
<li>Вторая вкладка</li>   
<li>Третья вкладка</li>
</ul>   

<div class="box visible">   
<p>Содержимое вкладки #1</p>   
</div>   

<div class="box">   
<p>Содержимое вкладки #2</p>   
</div>   

<div class="box">   
<p>Содержимое вкладки #3</p>   
</div>

</div>
 

Форум » Все для дизайна сайтов Ucoz » Скрипты » TabControl
Страница 1 из 11
Поиск:
Меня можно найти...

Мини профиль
Понедельник 20.11.17 19:27



Сертификат
Сертификат на никнейм Виктория Ермакова, зарегистрирован на Виктория Ермакова http://viktorija.ucoz.lv

Наша регистрация
Форма регистрации для родственников и друзей.
Нажми сюда >>>

Поделиться
Понравилась страничка..? Распечатай ее или посоветуй другу

Поделиться:

Пользователи

OnLine

Сейчас тут:
Нас посетили:


Инфо о сайте




счетчик посещений

владелец сайта:Виктория Ермакова | оформления сайта:Виктория Ермакова |Контакты: viktorija-er@inbox.lv
Copyright MyCorp © 2011- 2017|