|
   |
| Форум » Всё для uCoz » Скрипты для uCoz » Вкладки для uCoz (jQuery-tabs как на skygamers.ru) |
| Вкладки для uCoz |
Вкладки для uCoz на jQuery* [Table]На сайте skygamers.ru (не реклама) в правом контейнере есть блоки "Выходят скоро", "Вышли недавно" и т.д. Вас, наверное, интересует какой код отвечает за перемещения из блока "Выходят скоро" в блок "Вышли недавно"... Так вот, в этой теме я вам расскажу как сделать вкладки. [/Table] 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) 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;} [Table] *ВАЖНО: Данный СКРИПТ ВКЛАДОК работает с версией jQuery v1.6.1 [!]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> Админ - существо кроткое, пока не разозлить...٩(̾●̮̮̃̾•̃̾)۶ 
 |
| |||
| |||