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

⌛ читать всего 3 мин.

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

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

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

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

    1. Cоздадим заготовку html файла. Она выглядит примерно так:
      <div class="iie-btn btn-dropdownbox" id="nameMyButton" data-iddropdownbox="nameMyDropdowbox">
       Открыть
      </div>
      <div class="iie-dropdowbox" id="nameMyDropdowbox">
       <select>
       <option value=1>{значение 1}</option>
       <option value=2>{значение 2}</option>
       <option value=3>{значение 3}</option>
       <option value=4>{значение 4}</option>
       </select> <br>
       <select>
       <option value=1>{значение 1}</option>
       <option value=2>{значение 2}</option>
       <option value=3>{значение 3}</option>
       <option value=4>{значение 4}</option>
       </select>
      </div>

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

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

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

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

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

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

/* стиль кнопки */
.iie-btn {
 border:1px solid silver; /*бордюр кнопки*/
 /* width:60px; ширина кнопки*/
 height:30px; /* высота кнопки*/
 text-align:center; /* позицианируем текст по центру по горезонтали */
 /* начало позиционирование текста по вертикали */
 line-height:30px;
 vertical-align:50%;
 /* конец позиционирование текста по вертикали */
 background: #7db9e8; /*фон кнопки*/
 /*начало шрифт*/
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.75em;
 /*конец шрифт*/
 display: table; /*отображает див как ячейку по размеру контента*/
 padding-left:10px; /*внутренний отступ слева */
 padding-right:10px;/*внутренний отступ справа */
}

/* стиль при наведение курсора мышки в область нашей кнопки */
.iie-btn:hover {
 cursor: pointer; /* изменяем иконку курсора мыши */
}

/* стиль выпадающего блока */
.iie-dropdowbox {
 position:absolute; /*позволяет отоброжать блок поверх других элементов страницы*/
 z-index:100; /* у кого больше индекс тот и сверху */
 background: #ffffff; /*фон кнопки*/
 margin-left:30px; /*наружный отступ слева*/
 margin-top:1px; /*наружный отступ сверху*/
 display:none; /*по умолчанию блок считается скрытым*/
 border:1px solid gray; /*оформляем бордяр*/
 padding:5px;/*определяем отступ от краев блока внутри*/
}

.iie-btn.pressed /* стиль нажатой кнопки */
{
 /* создаем внутреннюю тень*/
 -webkit-box-shadow: inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
 -moz-box-shadow: inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
 box-shadow: inset 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
 /*конец создаем внутреннюю тень*/
}

.iie-dropdowbox.ddb_show /* стиль в котором прописываем, что наше окно должно отображаться */
{
 display:block; /* собственно отображаем блок*/
}

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

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

 

      1. javaScript
</pre>
//Назначаем функцию
$(".btn-dropdownbox").click(function(event){addBtnAddСlickedClass (event,this);}); // назначаем на событие click свою функцю для каждого элемента документа с классом btn-dropdownbox

function addBtnAddСlickedClass (event, elOwner) {
var idDropdownBox = elOwner.getAttribute("data-iddropdownbox");// получаем id блока который нужно отобразить
var dropdownBox = document.getElementById(idDropdownBox);// получаем сам элемент

// если у класса элемента (нашего выпадающего блока) в названии класса имеется ddb_show
if ($(dropdownBox).hasClass('ddb_show')) {
$(dropdownBox).removeClass('ddb_show'); // удаляем
}else
{$(dropdownBox).addClass('ddb_show');} // добавляем

// если у класса элемента (нашей кнопки) в названии класса имеется pressed
if ($(elOwner).hasClass('pressed')) {
$(elOwner).removeClass('pressed'); // удаляем
}
else
{$(elOwner).addClass('pressed');} // добавляем
}

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

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

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

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

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


<div class="iie-btn btn-dropdownbox" data-iddropdownbox="newMyDropdowbox">

</div>

<div class="iie-dropdowbox" id="newMyDropdowbox">

</div>

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

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

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