12:18
Обновить
Рекламный блок Форума
Реклама
Реклама
[Загрузить изображение на radikal не выходя с сайта]
  • Страница 1 из 1
  • 1
Вкладки для uCoz
soopermanДата: Суббота, 14.04.2012, 16:25 | Сообщение # 1
Логин: sooperman
Имя: kolia bondar
Сообщений: 100
Награды: 0
Репутация:
Замечания:
ID групы: 5
Для начала нам понадобиться сам JS-код (ставим после своего сайта):
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>
  • Страница 1 из 1
  • 1
Поиск:

Вверх