|
|
Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Табы с прокруткой (Как можно реализовать прокрутку в табах для Ucoz) |
Табы с прокруткой |
Здравствуйте, нашёл на форуме Ucoz данную тему TabControl и решил сделать у себя на сайте, всё отлично получилось, но огорчает одно, при большом количестве этих самых табов, они начинают сползать вниз и начинаются с новой строки, а хотелось бы сделать их в одну строку и с прокруткой по горизонтали соответственно, нашёл в сети вот этот сайт, там есть пример "Табы с прокруткой", я так и не смог это освоить, вроде и скрипты подключил куда надо и тд, но всё равно ничего не выходит, если кто разбирается в этих вещах, помогите пожалуйста, и если можно по шагово, я просто чайник в этих вещах.
Добавлено (08 Мар 2013, 17:08:22) Код <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 - стрелка вперёд. Стрелки прокрутки отображаются только тогда, когда табы переполняют горизонтальную строку. Демо можно посмотреть здесь: ДЕМО |
FelixFlo, можно было сделать проще: Заключаем табы в div блок с фиксированной шириной+максимально возможная ширина на всякий случай, и ставим в стайл значение overflow: scroll и всё, внизу у блока появится полоса прокрутки.
Вам помогут, если прикрепите:
- Ссылку на сайт - Скриншот проблемы через встроенное прикрепление изображений - HTML (CSS) Код проблемного участка в спойлере |
| |||
| |||