Блог
Подсветить элемент на странице
Иногда необходимо подсветить определённый элемент на странице, div или поле для ввода текста. В этом случае можно воспользоваться моей функцией. Она плавно затемняет весь экран, кроме определённого элемента. Также можно передать в функцию цвет заднего фона этого элемента.
Функция проходит по всем родителям элемента, и устанавливает им z-index равным auto. Если этого не делать, блок не будет подсвечен.
Код функции:
$.fn.extend({
highlightElement: function(object)
{
var target = this;
if(target.css("position") == "static")
{
target.css("position", "relative");
}
target.css("z-index", "100001");
var parent = target.parent();
while(!$(parent).is("body"))
{
if($(parent).css("z-index") != "auto")
{
$(parent).css("z-index", "auto");
}
parent = $(parent).parent();
}
if(object && object.backgroundColor)
{
var defaultColor = target.css("background-color");
target.css("background-color", object.backgroundColor);
}
if(!$("#overlay").length)
{
$("body").prepend("<div id = 'overlay'>");
$("#overlay").css(
{
"position" : "fixed",
"height" : "100%",
"width" : "100%",
"background" : "black",
"z-index" : "100000",
"display" : "none",
"opacity" : "0.8"
});
}
$("#overlay").fadeIn(500);
$("#overlay").click(function()
{
if(object && object.backgroundColor)
{
target.css("background-color", defaultColor);
}
$("#overlay").fadeOut(500);
});
}
});
Для того чтобы вызвать данную функцию, необходимо написать:
$(".show_overlay").click(function() {
$("#vk_community_messages").highlightElement({backgroundColor: "green"});
});
Где:
".show_overlay" - элемент, при клика на который выполнится функция.
"#vk_community_messages" - элемент который будет подсвечен.
backgroundColor: "green" - цвет заднего фона подсвечиваемого элемента.
В итоге должно получится:
-
-
Метод `highlightElement` слишком сложный, у него сразу 2 ответственности, он и навешивает событие клика, и подсвечивает элемент, это ограничивает возможный набор ситуаций для применения. К тому же метод имеет один жестко определенный параметр, что может препятствовать к дальнейшему его расширению, например, если понадобится добавить функцию обратного вызово или еще что-нибудь.
Правильнее и дальновиднее было бы сделать метод, который бы занимался только подстветкой элемента, оставив выбор события пользователям метода, и не ограничиваться при этом доп. параметром backgroundColor, а разрешить передавать массив с множеством настроек.
Например, можно было сделать вот так:
$('#vk_community_messages').higlightElement({ backgroundColor: 'green' });
С событием вот так:
$('.show_overlay').on('click', function() {
$('#vk_community_messages').higlightElement({ backgroundColor: 'green' });
}); -
-
Спасибо! Внёс изменения.
-
