• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Табы с прокруткой (Как можно реализовать прокрутку в табах для Ucoz)
Табы с прокруткой
FelixFlo
Сообщений: 6
Репутация: 0

Сообщение # 1 | 17:08:22
Здравствуйте, нашёл на форуме Ucoz данную тему TabControl и решил сделать у себя на сайте, всё отлично получилось, но огорчает одно, при большом количестве этих самых табов, они начинают сползать вниз и начинаются с новой строки, а хотелось бы сделать их в одну строку и с прокруткой по горизонтали соответственно, нашёл в сети вот этот сайт, там есть пример "Табы с прокруткой", я так и не смог это освоить, вроде и скрипты подключил куда надо и тд, но всё равно ничего не выходит, если кто разбирается в этих вещах, помогите пожалуйста, и если можно по шагово, я просто чайник в этих вещах.

Добавлено (08 Мар 2013, 17:08:22)
---------------------------------------------
Вообщем получилось сделать горизонтальную прокрутку в табах, нашёл данный сайт и объединил просто TabControl и скрипт прокрутки.

Как это всё подключать по порядку:

1. Загружаем tables.js и tables_scroll.js в папку js на своем сайте, или там где у вас хранятся скрипты.

2. Подключаем скрипты на странице, где собираетесь использовать tabControl и tables_scroll.js, перед закрывающимся тегом </body> вставляем приведенный ниже код:

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


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

Код
/* TabControl Start */

p{padding:0px 0;}
.sectiontable{width:100%; margin:0 0 30px}
ul.tabs{height:30px; line-height:30px; list-style:none; background:none}
.tabs li{float:left; display:inline; margin:0 1px -1px 0; padding:0 9px; color:#fff; cursor:pointer; background:#000; position:relative; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.tabs li:hover,  
.vertical .tabs li:hover{color:#FFF; padding:0 9px; background:#3f82d4;transition:all 0.50s ease-out;-moz-transition:all 0.50s ease-out;-webkit-transition:all 0.50s ease-out;-o-transition:all 0.50s ease-out}
.tabs li.current{color:#FFF; background:#e53d3d; padding:0 9px 0px; border:0px solid #D4D4D4; }
.box{display:none; background:#EFEFEF; padding:0 0px;}
.box.visible{display:block;}

/* TabControl End */

/* Tables_scroll Start */

.slider .next, .slider .prev{ display:none; cursor:pointer; background:url('/images/ваша картинка') no-repeat; border:none; width:20px; height:30px; color:#fff; float:left; padding:0; margin:0 -20px 0 -20px}
.slider .next{ float:right; background:url('/images/ваша картинка') no-repeat; width:20px; height:30px}
.slider div{ overflow:hidden; text-align:left; width:100%; height:587px!important; margin:0; padding:0}
.slider div ul{ width:25000px; // set to an arbitary high value overflow:hidden; margin:0; padding:0; margin-left:0}
.slider div ul li{ display:inline; padding:0 9px; margin:0 1px -1px 0; width:116px; text-align:center; background:#000; color:#fff}

/* Tables_scroll End */


4. Там где хотите чтобы отображались табы с прокруткой, вставляете следующий код:

Код
<div class="slider">
  <button class="prev"></button>
  <button class="next"></button>
<div>

<div class="sectiontable">
  <ul class="tabs">
  <li class="current">1 вкладка</li>
  <li>2 вкладка</li>
  <li>3 вкладка</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>
</div>
</div>



5. Классы:

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

Стрелки прокрутки отображаются только тогда, когда табы переполняют горизонтальную строку.

Демо можно посмотреть здесь:

ДЕМО
-=WaMpIr=-
Сообщений: 222
Репутация: 55

Сообщение # 2 | 17:28:50
FelixFlo, можно было сделать проще: Заключаем табы в div блок с фиксированной шириной+максимально возможная ширина на всякий случай, и ставим в стайл значение overflow: scroll и всё, внизу у блока появится полоса прокрутки.

Вам помогут, если прикрепите:
- Ссылку на сайт
- Скриншот проблемы через встроенное прикрепление изображений
- HTML (CSS) Код проблемного участка в спойлере
FelixFlo
Сообщений: 6
Репутация: 0

Сообщение # 3 | 17:57:41
Да я делал так изначально, но не понравилось как выглядит визуально, вот и решил по другому сделать.
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Табы с прокруткой (Как можно реализовать прокрутку в табах для Ucoz)
  • Страница 1 из 1
  • 1
Поиск: