Главная » 2012 » Август » 10 » Вкладки для uCoz (jQuery-tabs) (Скрипты для ucoz)
10.08.2012, 07:42

Вкладки для uCoz (jQuery-tabs)



Вкладки для uCoz на jQuery*

На сайте skygamers.ru (не реклама) в правом контейнере есть блоки "Выходят скоро", "Вышли недавно" и т.д.
Вас, наверное, интересует какой код отвечает за перемещения из блока "Выходят скоро" в блок "Вышли недавно"...
Так вот, в этой теме я вам расскажу как сделать вкладки.


  • Для начала нам понадобиться сам JS-код (ставим после <body> своего сайта):
    Code
    <script type="text/javascript" src="http://skygamers.ru/design/tabs_block/tabs.js"></script>
    Вот скрипт:
    Code
    // tabs for skygamers.ru
    (function($) {
    $(function() {

      $('ul.tabs').delegate('li:not(.current)', 'click', function() {
      $(this).addClass('current').siblings().removeClass('current')
      .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
      })

    })
    })(jQuery)


  • Вот сам блок с html (ставим в нужное место своего сайта):
    Code
    <div class="section">
    <ul class="tabs" style="border-bottom:1px solid #dadada;">
    <li class="current">Выходят скоро</li>
    <li>Вышли недавно</li>
    </ul>
    <div class="box visible" style="padding:0;"> <div>Содержимое [1]</div> </div>
    <div class="box" style="padding:0;"> <div>Содержимое [2]</div> </div>
    </div>


  • Далее прописываем стилизацию в свою таблицу стилей (классы):
    Code
    .section {width: 256px;}
    ul.tabs {line-height: 17px;list-style: none;background:url('http://skygamers.ru/design/box_t.png') repeat-x;height:22px;margin:0 0 0 0;border:1px solid #DADADA;border-bottom:0px;color:#525252;font-weight:bold;padding:0px !important;}
    .tabs li {float: left;display: inline;padding:3px 13px 2px;color: #777;cursor: pointer;background:url('http://skygamers.ru/design/box_t.png') repeat-x;border-right: 1px solid #DADADA;position: relative;}
    .tabs li:hover {color: #2D7EA8;background: #EFEFEF;padding:3px 13px 2px;}
    .tabs li.current {color: #444;background: #EFEFEF;padding:3px 13px 2px;border-bottom: none;cursor: default;}
    .box {display: none;padding:3px 3px 3px 3px;background:#fff;border:1px solid #DADADA;border-top:0px;border-bottom:0px;margin:0 0 5px 0;}
    .box.visible {display: block;}

  • Внимание: таблица стилей подойдёт для светлого дизайна, вы всегда можете переделать ее как вам угодно под свой дизайн [!]

    *ВАЖНО:
    Данный СКРИПТ ВКЛАДОК работает с версией jQuery v1.6.1 [!]
    Code
    <script type="text/javascript" src="/.s/src/jquery-1.6.1.js"></script>

    ∎ P.S.: И на закуску - пример использования самого скрипта, тоесть сам блок с HTML, переделанный на большее количество вкладок (редактируем код блока сами на нужное количество вкладок):
    Code
    <script type="text/javascript" src="/.s/src/jquery-1.6.1.js"></script>
    <style type="text/css">
    .section {width: 100%;}
    ul.tabs {line-height: 17px;list-style: none;background:url('http://skygamers.ru/design/box_t.png') repeat-x;height:22px;margin:0 0 0 0;border:1px solid #DADADA;border-bottom:0px;color:#525252;font-weight:bold;padding:0px !important;}
    .tabs li {float: left;display: inline;padding:3px 13px 2px;color: #777;cursor: pointer;background:url('http://skygamers.ru/design/box_t.png') repeat-x;border-right: 1px solid #DADADA;position: relative;}
    .tabs li:hover {color: #2D7EA8;background: #EFEFEF;padding:3px 13px 2px;}
    .tabs li.current {color: #444;background: #EFEFEF;padding:3px 13px 2px;border-bottom: none;cursor: default;}
    .box {display: none;padding:3px 3px 3px 3px;background:#fff;border:1px solid #DADADA;border-top:0px;border-bottom:0px;margin:0 0 5px 0;}
    .box.visible {display: block;}
    </style>

    <script type="text/javascript" src="http://skygamers.ru/design/tabs_block/tabs.js"></script>
    <div class="section">
    <ul class="tabs" style="border-bottom:1px solid #dadada;">
    <li class="current">Вкладка №1</li>
    <li>Вкладка №2</li>
    <li>Вкладка №3</li>
    <li>Вкладка №4</li>
    <li>Вкладка №5</li>
    </ul>
    <div class="box visible" style="padding:0;"> <div>Содержимое [1]</div> </div>
    <div class="box" style="padding:0;"> <div>Содержимое [2]</div> </div>
    <div class="box" style="padding:0;"> <div>Содержимое [3]</div> </div>
    <div class="box" style="padding:0;"> <div>Содержимое [4]</div> </div>
    <div class="box" style="padding:0;"> <div>Содержимое [5]</div> </div>
    </div>
    Материал взят с сайта infoscript.ru
    Теги: Скачать Вкладки для uCoz (jQuery-tabs)
    Скачать "Вкладки для uCoz (jQuery-tabs)"
    Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
    Источник/Автор: Stand Alone Man
    • Категория: Скрипты uCoz | Просмотров: 1916 | Добавил: -SAM- | Рейтинг: 0.0/0 |
    Теги: jQuery-tabs, by -SAM-, Вкладки для uCoz
    Пока комментариев нет. Ты можешь быть первым!
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]