Рассмотрим, как можно создать
выдвижные вкладки на JavaScript, которые выдвигались бы при клике мышью по заголовку вкладки. На таких вкладках можно размещать различную дополнительную информацию. Пример можно посмотреть на странице "
выдвижные вкладки".
Для
создания выдвижных вкладок нам нужно будет использовать свойство каскадных таблиц стилей для блоков
overflow со значением
hidden и свойства относительного и абсолютного позиционирования. Так если указать для блока
div свойство
overflow со значением
hidden, то содержимое, выходящее за границы данного блока, не будет отображено и размеры блока изменены не будут, не будут отображены и полосы прокрутки содержимого. То есть нужно будет менять координаты абсолютно позиционированных блоков вкладок относительно блока со стилевым свойством
overflow:hidden.
Для начала создадим блок
div (с именем класса "
block_inset") с высотой равной высоте заголовков вкладок, в этом блоке поместим блок (с именем класса "
inset_pole") со стилевым свойством
overflow:hidden , в котором и будут перемещаться блоки вкладок. Приведу полностью HTML-код страницы, в котором наши вкладки будут находиться под блоком меню сайта.
Код
<!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>
<!-- тут пишем HTML-код следующих вкладок (если нужно конечно) -->
</div>
</div>
<div class="text_site">
Основной текст сайта
</div>
</body>
</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 г.