Создание выдвижных вкладок на JavaScript

Рассмотрим, как можно создать выдвижные вкладки на JavaScript, которые выдвигались бы при клике мышью по заголовку вкладки. На таких вкладках можно размещать различную дополнительную информацию. Пример можно посмотреть на странице "выдвижные вкладки".
Для создания выдвижных вкладок нам нужно будет использовать свойство каскадных таблиц стилей для блоков overflow со значением hidden и свойства относительного и абсолютного позиционирования. Так если указать для блока div свойство overflow со значением hidden, то содержимое, выходящее за границы данного блока, не будет отображено и размеры блока изменены не будут, не будут отображены и полосы прокрутки содержимого. То есть нужно будет менять координаты абсолютно позиционированных блоков вкладок относительно блока со стилевым свойством overflow:hidden.
Для начала создадим блок div (с именем класса "block_inset") с высотой равной высоте заголовков вкладок, в этом блоке поместим блок (с именем класса "inset_pole") со стилевым свойством overflow:hidden , в котором и будут перемещаться блоки вкладок. Приведу полностью HTML-код страницы, в котором наши вкладки будут находиться под блоком меню сайта.

Код

Для добавления вкладок в соответствующем месте нужно прописать HTML-код

Код

<div class="inset_num" id="inset_numN">
<div class="inset_kontent">Содержимое вкладки</div>
<div class="inset_header" id="inset_headerN" onClick="click_header_inset(N);"><div>Вкладка</div></div>
</div>

и нужно прописать в каскадных таблицах стилей положение нового блока вкладки в блоке "inset_pole"

Код

#inset_numN { left: новое_расстояние px; }

где вместо N нужно прописать номер вкладки, он недолжен повторяться.
Щелчок клавишей мыши по заголовку вкладки будем перехватывать обработчиком события onClick, указав ему функцию click_header_inset(номер_вкладки). Теперь давайте определимся, как должны работать вкладки.

Вкладка должна плавно отрыться после щелчка мышью по заголовку;
Если есть открытая какая-либо другая вкладка, то она должна плавно закрыться, а потом отрыться нужная;
После щелчка мышью по отрытой вкладке, она должна плавно закрыться.

Получим следующий код

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Вкладки</title>
<style type="text/css">

body { margin:0px; padding:0px; }
.menu { background:#7BB9FD; padding:5px; }
.text_site { padding:10px; }
/* свойства вкладок */
.block_inset { position:relative; height:30px; }
.inset_pole { overflow:hidden; width:100%; height:300px;
position:absolute; left:0px; top:0px; }
.inset_num { position:absolute; background:#80FFFF; width:200px; height:150px;
top:-120px; }
.inset_header { position:absolute; bottom:0px; left:0px; width:100%;
cursor:pointer; text-align:center; background:#00FF40; height:30px; }
.inset_header div { padding:5px; }
.inset_kontent { padding:10px; height:120px; background:#408080; color:#eee; }

/* вкладки */
#inset_num1 { left:10px; }
#inset_num2 { left:220px; }
#inset_num3 { left:430px; }

</style>
</head>
<body>
<h1>Заголовок сайта</h1>
<div class="menu">
меню
</div>
<div class="block_inset">
<div class="inset_pole" id="inset_pole1">

<div class="inset_num" id="inset_num1">
<div class="inset_kontent">Содержимое вкладки</div>
<div class="inset_header" id="inset_header1" onClick="click_header_inset(1);" ><div>Вкладка</div></div>
</div>

<div class="inset_num" id="inset_num2">
<div class="inset_kontent">
Содержимое вкладки
</div>
<div class="inset_header" id="inset_header2" onClick="click_header_inset(2);" ><div>Вкладка</div></div>
</div>

<div class="inset_num" id="inset_num3">
<div class="inset_kontent">
Содержимое вкладки</div>
<div class="inset_header" id="inset_header3" onClick="click_header_inset(3);" ><div>Вкладка</div></div>
</div>

</div>
</div>

<div class="text_site">
Основной текст сайта
</div>

<script type="text/javascript">

num_inset_motor=0;
flag_inset_motor=0;
time_pause_motor=1;//задержка между перемещениями в миллисекундах
delta_y=3;//величина перемещения вкладки
set_motor=false;
id_settimeout=0;
open_inset_num=0;
next_open_num=0;
height_header=30;//высота заголовка вкладки

function click_header_inset(n_inset)
{

if (!set_motor)
{
next_open_num=0;
if (open_inset_num==0)
{
num_inset_motor=n_inset;
flag_inset_motor=1;
set_motor=true;
motor_inset();
}
else
{
if (n_inset!=open_inset_num) next_open_num=n_inset;
num_inset_motor=open_inset_num;
flag_inset_motor=-1;
set_motor=true;
motor_inset();

}
}
else
{
clearTimeout(id_settimeout);
if (n_inset==num_inset_motor)
{
flag_inset_motor*=-1;
motor_inset();
}
else
{
next_open_num=n_inset;
if (flag_inset_motor>0)
{
flag_inset_motor=-1;

}
motor_inset();
}
}
}

function motor_inset()
{
if (num_inset_motor==0) return;
if (flag_inset_motor==0) return;
obj_name="inset_num"+num_inset_motor;
obj_inset=document.getElementById(obj_name);
y_inset_motor=obj_inset.offsetTop;

y_inset_motor+=flag_inset_motor*delta_y;

if (flag_inset_motor>0)
{
if (y_inset_motor>0)//вкладка отрыта
{
y_inset_motor=0;
set_motor=false;
open_inset_num=num_inset_motor;
}
}
else
{
if (y_inset_motor<=height_header-obj_inset.offsetHeight)//вкладка закрыта
{
y_inset_motor=height_header-obj_inset.offsetHeight;
set_motor=false;
open_inset_num=0;
if (next_open_num>0)
{

num_inset_motor=next_open_num;
next_open_num=0;
flag_inset_motor=1;
set_motor=true;

}
}

}
obj_inset.style.top=y_inset_motor+"px";

if (set_motor)
{
id_settimeout=setTimeout("motor_inset()",time_pause_motor);
}

}

</script>

</body>
</html>

Функция click_header_inset() определяет, по какой вкладке произошел щелчок клавиши мыши и задает дальнейшие действия скрипта. Функция motor_inset() перемещает заданную вкладку в нужном направлении. Задается скорость перемещения вкладок переменными time_pause_motor и delta_y.

Опубликовано 05 ноября 2008 г.

Теги: javascript, динамические эффекты

Комментарии к публикации

Всего комментариев: 16

У вас в браузере отключен JavaScript! Пожалуйста, включите JavaScript для возможности оставлять комментарии.

прохожий: Гость | 28.01.2009, 22:43 #

Интересный эффект. Большое спасибо!

Логин
Пароль