Dropdownbox или пример связывания двух элементов html документа  для всего проекта

Reading Time: 1 minute

призрак-мини-не-очень

Вечер, пятница, и хорошее настроение.

По работе пришлось решать примерно такую задачу: «привязать событие элемента html документа к функции, которая выполняет какие-то действия над другим элементом, при все при этом, сделать так, что бы не пришлось больше писать ни строчки javascript кода, для реализации этого же функционала в другом месте страницы или проекта» — это если выразится басятским простым языком .

Что же, приступим.

    1. Cоздадим заготовку html файла. Она выглядит примерно так:

      &lt;div class=&quot;iie-btn btn-dropdownbox&quot; id=&quot;nameMyButton&quot; data-iddropdownbox=&quot;nameMyDropdowbox&quot;&gt;<br />
       Открыть<br />
      &lt;/div&gt;<br />
      &lt;div class=&quot;iie-dropdowbox&quot; id=&quot;nameMyDropdowbox&quot;&gt;<br />
       &lt;select&gt;<br />
       &lt;option value=1&gt;{значение 1}&lt;/option&gt;<br />
       &lt;option value=2&gt;{значение 2}&lt;/option&gt;<br />
       &lt;option value=3&gt;{значение 3}&lt;/option&gt;<br />
       &lt;option value=4&gt;{значение 4}&lt;/option&gt;<br />
       &lt;/select&gt; &lt;br&gt;<br />
       &lt;select&gt;<br />
       &lt;option value=1&gt;{значение 1}&lt;/option&gt;<br />
       &lt;option value=2&gt;{значение 2}&lt;/option&gt;<br />
       &lt;option value=3&gt;{значение 3}&lt;/option&gt;<br />
       &lt;option value=4&gt;{значение 4}&lt;/option&gt;<br />
       &lt;/select&gt;<br />
      &lt;/div&gt;

Обратите внимание на классы!

Первый div блок:

  • iie-btn– этот класс мы будем использовать для оформления блока в виде кнопки.
  • btn-dropdownbox – этот класс мы будем использовать для того, что бы понимать назначение данной кнопки и переопределять у нее события.

Вы можете заметить id  элемента, но оно тут не нужно, так для проформы. А вот data-iddropdownbox параметр очень важный, фактически это ссылка (id) на другой див который мы будем отображать.

Второй div блок:

  • iie-dropdowbox для оформления блока и по умолчанию, он имеет параметр «display:none;» т.е. по умолчанию блок считается скрытым. Это дальше так же пояснено в комментариях css файла.
  • Вожным элементом является id данного блока. Именно он должен прописываться в первой div блоке в атрибуте btn-iddropdownbox.
  • Внутри второго блока располагаем произвольные элементы. Я разместил два тега select.
      1. Файл css

</p>
<p>/* стиль кнопки */<br />
.iie-btn {<br />
 border:1px solid silver; /*бордюр кнопки*/<br />
 /* width:60px; ширина кнопки*/<br />
 height:30px; /* высота кнопки*/<br />
 text-align:center; /* позицианируем текст по центру по горезонтали */<br />
 /* начало позиционирование текста по вертикали */<br />
 line-height:30px;<br />
 vertical-align:50%;<br />
 /* конец позиционирование текста по вертикали */<br />
 background: #7db9e8; /*фон кнопки*/<br />
 /*начало шрифт*/<br />
 font-family: Arial, Helvetica, sans-serif;<br />
 font-size: 0.75em;<br />
 /*конец шрифт*/<br />
 display: table; /*отображает див как ячейку по размеру контента*/<br />
 padding-left:10px; /*внутренний отступ слева */<br />
 padding-right:10px;/*внутренний отступ справа */<br />
}</p>
<p>/* стиль при наведение курсора мышки в область нашей кнопки */<br />
.iie-btn:hover {<br />
 cursor: pointer; /* изменяем иконку курсора мыши */<br />
}</p>
<p>/* стиль выпадающего блока */<br />
.iie-dropdowbox {<br />
 position:absolute; /*позволяет отоброжать блок поверх других элементов страницы*/<br />
 z-index:100; /* у кого больше индекс тот и сверху */<br />
 background: #ffffff; /*фон кнопки*/<br />
 margin-left:30px; /*наружный отступ слева*/<br />
 margin-top:1px; /*наружный отступ сверху*/<br />
 display:none; /*по умолчанию блок считается скрытым*/<br />
 border:1px solid gray; /*оформляем бордяр*/<br />
 padding:5px;/*определяем отступ от краев блока внутри*/<br />
}</p>
<p>.iie-btn.pressed /* стиль нажатой кнопки */<br />
{<br />
 /* создаем внутреннюю тень*/<br />
 -webkit-box-shadow: inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);<br />
 -moz-box-shadow: inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);<br />
 box-shadow: inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);<br />
 /*конец создаем внутреннюю тень*/<br />
}</p>
<p>.iie-dropdowbox.ddb_show /* стиль в котором прописываем, что наше окно должно отображаться */<br />
{<br />
 display:block; /* собственно отображаем блок*/<br />
}</p>
<p>

Я очень подробно расписал стили. Так что думаю бессмысленно что-то больше тут описывать. Хочу только поделиться теми инструментами, которыми удобно генерировать часть стелей т.к. парой неудобно составлять их вручную.

Генераторы css:

 

      1. javaScript

&lt;/pre&gt;<br />
//Назначаем функцию<br />
$(&quot;.btn-dropdownbox&quot;).click(function(event){addBtnAddСlickedClass (event,this);}); // назначаем на событие click свою функцю для каждого элемента документа с классом btn-dropdownbox</p>
<p>function addBtnAddСlickedClass (event, elOwner) {<br />
var idDropdownBox = elOwner.getAttribute(&quot;data-iddropdownbox&quot;);// получаем id блока который нужно отобразить<br />
var dropdownBox = document.getElementById(idDropdownBox);// получаем сам элемент</p>
<p>// если у класса элемента (нашего выпадающего блока) в названии класса имеется ddb_show<br />
if ($(dropdownBox).hasClass('ddb_show')) {<br />
$(dropdownBox).removeClass('ddb_show'); // удаляем<br />
}else<br />
{$(dropdownBox).addClass('ddb_show');} // добавляем</p>
<p>// если у класса элемента (нашей кнопки) в названии класса имеется pressed<br />
if ($(elOwner).hasClass('pressed')) {<br />
$(elOwner).removeClass('pressed'); // удаляем<br />
}<br />
else<br />
{$(elOwner).addClass('pressed');} // добавляем<br />
}

Хочу пояснить: В данной реализации используется JQuery. Следовательно он у вас должен быть подключен примерно так:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

От этой библиотеки можно отказать, но реализация будет менее удобной и лаконичной (всего то нужно написать собственный парсер для того что бы удалять и добавлять классы наших элементов и необходимо будет написать назначение функции для события click элементов) – это не сложно, но времени на самом деле в обрез, а проект мой все равно уже использует эту библиотеку.

В чем удобство данной реализации ?

Теперь во всем своем проекте вы можете быстро и удобно создавать выпадающие боксы всего лишь используя html

</p>
<p>&lt;div class=&quot;iie-btn btn-dropdownbox&quot; data-iddropdownbox=&quot;newMyDropdowbox&quot;&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;div class=&quot;iie-dropdowbox&quot; id=&quot;newMyDropdowbox&quot;&gt;</p>
<p>&lt;/div&gt;</p>
<p>

Разместите только что-то внутри блоков.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *