Веб-компас сайтостроителей
/ Все статьи / JavaScript / Примеры на JavaScript / Создание выдвижных вкладок на JavaScript

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

Рассмотрим, как можно создать выдвижные вкладки на 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(номер_вкладки). Теперь давайте определимся, как должны работать вкладки.
  1. Вкладка должна плавно отрыться после щелчка мышью по заголовку;
  2. Если есть открытая какая-либо другая вкладка, то она должна плавно закрыться, а потом отрыться нужная;
  3. После щелчка мышью по отрытой вкладке, она должна плавно закрыться.

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

 

Код
<!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.
Комментарии к публикации
Всего комментариев: 16
прохожий: Гость | 28.01.2009, 22:43 #
Интересный эффект. Большое спасибо!
пользователь: veslife | 12.02.2009, 03:59 #
Прикольно! Спасиб.
прохожий: gps | 18.07.2009, 08:16 #
Отлично спасибо
прохожий: Гость | 01.10.2009, 23:21 #
в старом эксплорере не очень хорошо работает - мерцает.
Автор статьи: admin | 03.10.2009, 20:53 #
А зачем использовать старый эксплорер? :)
прохожий: Гость | 02.02.2010, 03:25 #
Хотела бы, чтобы высота выезжающего списка не была фиксированной, чтобы измерялась в зависимости от объема написанного
прохожий: Алексей | 12.04.2010, 10:20 #
Дмитрий подскажите, а лучше напишите на своем сайте уроки как сделать такую же форму как у Вас (интересна не форма а код JavaScript) нажимаешь на ссылку "Добавить коментарий" появляется форма, нажимаешь "Закрыть" форма исчезает. И еще урок как сделать модальное окно с полупрозрачным цветом и определенным размером.
Автор статьи: admin | 14.04.2010, 07:52 #
Алексей, как только появится время напишу. Но не понял я, что за модальное окно с полупрозрачным цветом?
прохожий: vseocomputere | 02.06.2011, 06:13 #
Ну ща проверим, твое творение
прохожий: Сергей | 12.09.2011, 23:09 #
Дополнительное меню, спасибо, забрал в коллекцию...
прохожий: Антон | 23.09.2011, 21:09 #
То есть если этот код внедрять в CMS, нужно просто вместо Содержимое вкладки прописать к примеру в dle {tags}
Автор статьи: admin | 26.09.2011, 21:24 #
Нет, просто прописать {tags} не получится. Читайте внимательно статью, и делайте как написано.
прохожий: Дмитрий | 15.11.2011, 20:25 #
Скрипт в коллекции. Спасибо!
А всё-таки: высоту содержимого контента можно сделать динамической в зависимости от количества элементов контента?
Очень бы хотелось! В Javascript вообще профан.
прохожий: Дмитрий | 16.11.2011, 06:00 #
Парился, парился с этим javascript-ом, а оказалось всё просто:
1. В строке стилей .inset_header меняем position:relative;.
2. В строке стилей .inset_num меняем header:auto; top:-140px;.
3. В строке стилей .inset_kontent добавляем overflow:auto;.
Ву-а-ля! Контент теперь изменяемый!
прохожий: air-eco | 17.11.2011, 19:34 #
Спасибо! получилось, вообще круть!!
прохожий: Viktor | 08.04.2015, 19:49 #
Как сюда прикрутить куки , чтобы запоминалось положение панелей
Добавить комментарий
Новости сайта
  • 06.04.2020
    Уважаемые пользователи, сегодня был обновлен наш сайт www.linedmk.com – сделан новый адаптивный дизайн, улучшена навигация по сайту и улучшен поиск по статьям.
  • 12.10.2012
    С сегодняшнего дня официально прекращена поддержка продуктов реализованных на CMS linedmk.com.
  • 14.09.2011
    Создание современных сайтов не обходится без программирования, и на наш сайт www.linedmk.com так же освещает вопросы связанные с программированием на JavaScript и PHP. И поэтому мы поздравляем и вас и себя с этим праздником! :)
Последние публикации в каталоге статей