Вкладки для uCoz на jQuery*
[Table]На сайте skygamers.ru (не реклама) в правом контейнере есть блоки "Выходят скоро", "Вышли недавно" и т.д.
Вас, наверное, интересует какой код отвечает за перемещения из блока "Выходят скоро" в блок "Вышли недавно"...
Так вот, в этой теме я вам расскажу как сделать вкладки.[spoiler="Скриншот"]
[/spoiler][/Table]Код
(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)[/codes]
Код
- Выходят скоро
- Вышли недавно
Содержимое [1]
Содержимое [2]
Код
.section {width: 256px;}
ul.tabs {line-height: 17px;list-style: none;background:url('https://web.archive.org/web/20110816071208im_/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('https://web.archive.org/web/20110816071208im_/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;}
ul.tabs {line-height: 17px;list-style: none;background:url('https://web.archive.org/web/20110816071208im_/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('https://web.archive.org/web/20110816071208im_/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, переделанный на большее количество вкладок (редактируем код блока сами на нужное количество вкладок):
Код
- Вкладка №1
- Вкладка №2
- Вкладка №3
- Вкладка №4
- Вкладка №5
Содержимое [1]
Содержимое [2]
Содержимое [3]
Содержимое [4]
Содержимое [5]
---Материал восстановлен из кэша Google за 12 май 2012 19:04:22 GMT---
---За скриншот спасибо, hitz---
