Веб-компас сайтостроителей
Создание выдвижных вкладок на JavaScript
Рассмотрим, как можно создать выдвижные вкладки на JavaScript, которые выдвигались бы при клике мышью по заголовку вкладки. На таких вкладках можно размещать различную дополнительную информацию. Пример можно посмотреть на странице "выдвижные вкладки".
Для создания выдвижных вкладок нам нужно будет использовать свойство каскадных таблиц стилей для блоков overflow со значением hidden и свойства относительного и абсолютного позиционирования. Так если указать для блока div свойство overflow со значением hidden, то содержимое, выходящее за границы данного блока, не будет отображено и размеры блока изменены не будут, не будут отображены и полосы прокрутки содержимого. То есть нужно будет менять координаты абсолютно позиционированных блоков вкладок относительно блока со стилевым свойством overflow:hidden.
Для начала создадим блок div (с именем класса "block_inset") с высотой равной высоте заголовков вкладок, в этом блоке поместим блок (с именем класса "inset_pole") со стилевым свойством overflow:hidden , в котором и будут перемещаться блоки вкладок. Приведу полностью HTML-код страницы, в котором наши вкладки будут находиться под блоком меню сайта.
и нужно прописать в каскадных таблицах стилей положение нового блока вкладки в блоке "inset_pole"
Щелчок клавишей мыши по заголовку вкладки будем перехватывать обработчиком события onClick, указав ему функцию click_header_inset(номер_вкладки). Теперь давайте определимся, как должны работать вкладки.
Получим следующий код
Для создания выдвижных вкладок нам нужно будет использовать свойство каскадных таблиц стилей для блоков 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.11.2008, просмотров 19680
Еще статьи из данной категории
Новости сайта
-
05.05.2022Уважаемые пользователи, наш сайт переехал на новый домен, но все материалы останутся без изменений.
-
06.04.2020Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
-
12.10.2012С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
А всё-таки: высоту содержимого контента можно сделать динамической в зависимости от количества элементов контента?
Очень бы хотелось! В Javascript вообще профан.
1. В строке стилей .inset_header меняем position:relative;.
2. В строке стилей .inset_num меняем header:auto; top:-140px;.
3. В строке стилей .inset_kontent добавляем overflow:auto;.
Ву-а-ля! Контент теперь изменяемый!