Недавно захотелось мне сделать, что бы на моем проекте ошибки отображались именно там, где они были совершены. Т.е. если вы не верно ввели e-mail, то и ошибка должна отображаться именно рядом с «инпутом» для ввода e-mail’а. Так в чем проблема? Писать прям под этим «инпутом» и все. Нет! А если не хватает места? Вот именно такая ситуация возникла у меня, в некоторых местах «впендюрить» ошибку просто некуда из-за отсутствия места для нее.
В связи с этим, мы понимаем, что нужно использовать подобие JavaScript’ового «алерта». Знаю, «алерт» — это не кошерно. Поэтому необходим выскакивающий-плавающий «див», причем привязанный в меступрестпуления совершения ошибки.
Поискав немного среди плагинов для «jQuery» я не нашел ничего путного. Либо я плохо искал, либо действительно ничего подходящего нет. Поэтому прошу взглянуть на мой вариант:
Сама функция:
Всплывающий «див»:
В функцию передается «e» — объект (DOM элемент) к которому будет привязана ошибка, и «message» — сообщение об ошибке, которое будет отображено пользователю.
В свою очередь функция определяет местоположение (координаты) объекта, клонирует уже существующий «див» и привязывает его (визуально) к месту происшествия.
Вот результат работы этой функции:
При клике на ошибку «див» уничтожается.
P.S. Мои знания JavaScript, хватают лишь на то, что бы побаловаться. Поэтому любая конструктивная критика приветствуется.
В связи с этим, мы понимаем, что нужно использовать подобие JavaScript’ового «алерта». Знаю, «алерт» — это не кошерно. Поэтому необходим выскакивающий-плавающий «див», причем привязанный в месту
Поискав немного среди плагинов для «jQuery» я не нашел ничего путного. Либо я плохо искал, либо действительно ничего подходящего нет. Поэтому прошу взглянуть на мой вариант:
Сама функция:
function showError(e, message) {
if (message.length < 1) {
return false;
}
eOffset = $(e).offset();
eBox = $('#error_Box').clone();
eBoxId = $(e).attr('id') + '_Error';
$(eBox).attr({ id: eBoxId });
$(eBox).css({ top: eOffset.top + 13, left: eOffset.left + 25, display: '' }).text(message).prependTo('body');
$(eBox).bind('click', function() {
$(this).remove();
});
}
* This source code was highlighted with Source Code Highlighter.Всплывающий «див»:
<div id="error_Box" class="error_Box" style="display: none;"></div>
* This source code was highlighted with Source Code Highlighter.В функцию передается «e» — объект (DOM элемент) к которому будет привязана ошибка, и «message» — сообщение об ошибке, которое будет отображено пользователю.
В свою очередь функция определяет местоположение (координаты) объекта, клонирует уже существующий «див» и привязывает его (визуально) к месту происшествия.
Вот результат работы этой функции:
При клике на ошибку «див» уничтожается.
P.S. Мои знания JavaScript, хватают лишь на то, что бы побаловаться. Поэтому любая конструктивная критика приветствуется.