Вечер, пятница, и хорошее настроение.
По работе пришлось решать примерно такую задачу: «привязать событие элемента html документа к функции, которая выполняет какие-то действия над другим элементом, при все при этом, сделать так, что бы не пришлось больше писать ни строчки javascript кода, для реализации этого же функционала в другом месте страницы или проекта» — это если выразится басятским простым языком .
Что же, приступим.
- 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.
- Файл 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:
- градиенты — http://www.colorzilla.com/gradient-editor/
- шрифты — http://texster.ru/
- тени — http://css3gen.com/box-shadow/
- 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>
Разместите только что-то внутри блоков.
- Демо : http://jsfiddle.net/ilich87/z2Su4/22/
- Так же очень полезная и интересная статья, для более внятного понимания тонкостей вертикального позиционирования тескта внутри div блока: http://web-standards.ru/articles/vertical-align/