AJAX-светофорчики
Проектирование 12.08.2008
Интро
Вот появилась свободная минутка… В далеком 2007-ом году у меня была статья о “flash-сообщениях” - сообщения которые мы показываем пользователю после перезагрузки страницы. Очень удобная и нужная штука :)
Но эти сообщения не подходят для AJAX-обработчиков. Что же делать? Ведь AJAX-функций на наших сайтах становится все больше.
И вот сегодня, по служебной необходимости, мне понадобилось уведомлять пользователей о результатах AJAX-функций.
Пара строчек на JS + jQuery и готово!
В отличии от предыдущей статьи, никаких диаграмм мы чертить не будем, здесь все гораздо проще. Нам просто нужно создать в теле документа контейнер, разместить его, например, в правом верхнем углу браузера и выводить в него блоки сообщений. Все просто. Начнем с конца - с оформления.
CSS
#ajax_alert {
width:400px;
position:fixed;
top:0; right:0;
z-index:7777;
}
* html #ajax_alert { /* IE fix */
position:absolute;
top:expression(eval(document.documentElement.scrollTop) + 'px');
}
#ajax_alert .item {
display:none;
padding:10px;
color:#fff;
font-size:1em;
border:1px solid #fff;
}
#ajax_alert .item h2 {
margin:0 0 0.5em 0;
font-size:1.4em;
}
#ajax_alert .message {
background:#80c875;
}
#ajax_alert .error {
background:#ec977b;
}
#ajax_alert .notice {
background:#0099FF;
}Вот такой простенький получился CSS. Елемент с id ajax_alert и есть наш контейнер. В него мы будем добавлять блоки сообщений с общим классом item и дополнительными классами: message, error, notice, в зависимости от типа сообщения. Различаться они будут только цветом блока. Само сообщения у нас будет состоять их 2 частей: заголовок и текст.
Теперь все, что нужно у нас есть, приступим к написанию JS’а.
JavaScript, jQuery и все, все, все…
Сразу приведу эти 2 строчки кода:
var Alert = {
show: function(title, text, class_name) {
if (!$('#ajax_alert').attr('id')) {
$('<div id="ajax_alert"></div>').appendTo(document.body);
}
$('<div class="item ' + class_name + '"><h2>' + title + '</h2>' + text + '</div>')
.prependTo($('#ajax_alert'))
.fadeIn('slow')
.animate({opacity: 1.0}, 3000)
.fadeOut('slow', function() {$(this).remove();});
}
}
Вот и все! Задача выполнена. Можно встраивать в проект и идти пить чай.
HTML (пример использования)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Alert Ajax</title>
<link rel="stylesheet" type="text/css" media="all" href="main.css" />
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/alert.js" type="text/javascript"></script>
<script type="text/javascript">
function request() {
//Тут мы делаем обращение к серверу
//возвращаем результат и в зависимости от него
//выводим сообщение
if (result) {
Alert.show('Заголовок сообщения', 'Поздравляем! Что-то выполнилось', 'message');
} else {
Alert.show('Заголовок сообщения', 'При выполнении чего-то произошла ошибка', 'error')
}
}
</script>
</head>
<body>
<a href="#" onclick="request(); return;">Кликни!</a>
</body>
</html>
хм.. прямы как на хабре)
Да, есть немного. Правда, такие сообщения есть не только на Хабре )
На хабре уже пошли жалобы на такие сообщения. Слишком далеко от “места” выводятся, пользователь может не заметить. Особенно если монитор большой и элемент на который надо среагировать находится слева внизу :)
Денис, а на что реагировать? Обычно это сообщения пассивного характера. Или я ошибаюсь? Просто на Хабре не зареген )
http://habrahabr.ru/blogs/habrahabr_ideas/36663/
Денис, вы невнимательно читали комментарии на Хабре. Там люди возмущаются из-за того, что JS-семафорчики повесили на те действия которые были с перезагрузкой.
Да и в основном там всем не нравятся новые введения на сайте, а не эти сообщения.
Хорошая штука. И интерфейс вышел удобный.
вай, вчера точно такую же весчь реализовал с помощью jQuery, то же с фадеином, 2 сек показа, также красные зеленые мессаджи, но еще + фишечку, мессагу можно показать статиком и абсолютом ниже любого элемента формы, показать так сказать что мол там ошибся. Ну и еще + круглые края для наглядности.
специально для недовольных способом, которым эффект реализован на хабре, в подписи ссылка на более элегантный вариант на jQuery. хотя авторский способ тоже может пригодиться в определенных интерфейсах, на всякий случай сохранил код :)
эк мы в одночасье-то :)
и все-таки это решение отличное решение замены противным алертам. Пользователь без дергания воспринимает инфо об ошибке.
М-да… на сайте у kikaha, нашел полезную ссылочку на плагин jGrowl.
В общем можно было ничего и не писать ))) Все уже написано.
Правда мое решение выигрывает по простоте - ничего лишнего и всего пара строчек кода. А это иногда важно )
А обещал про дата-мапперы =\
sectronix, всему свое время =)
И всё же есть проблема с IE 6.0. Сообщение выводиться в позиции y=0 при присутствии скролинга, как пример попробуй разнести страницу, проскролируй в самый низ и выведи alert.show. Под FF и Opera таких проблем не замечено, алерт виден всегда. Похоже css не до конца отлажен.
Хм… Буду благодарен багфиксу )))
Если у кого есть идеи как решить данную проблему - пишите!
Думаю не стоит их делать “исчезающими”,лучше уж там крестик в углу.
“Крести в углу” потребует от пользователя дополнительных телодвижений, что не есть хорошо.
Крестик можно делать только на очень важных сообщениях, что б быть уверенным, что пользователь сообщение точно прочел )
Всё оказалось довольно просто, ничего менять не нужно, просто на странице необходимо добавить декларацию
Работает, проверено.
Хм, html вырезало, непорядочек. В обещем для IE обязательное добавление определения DOCTYPE
Кстати, для закрытия использую следующее
.click(function(){
$(this).stop();
$(this).hide("normal");
})
Для меня это уже само-собой-разумеется. ))) Поэтому всера долго не мог понять почему у меня все работает, что я делаю не так? )))
Почти копия Хабра
Да ладно, какой там Хабр…
Люди, что вам дался Хабр?! Да, сайт сделан очень красиво и технично (снимаю шляпу), но эти светофорчики это не их изобретение ))) Такое есть на многих забугорных сайтах.
у вас проблемы со стилем кодирования на jquery.
возьмем кусок и попробуем упростить
!$('#ajax_alert').attr('id')
...
!$('#ajax_alert').length
$('' + title + '' + text + '').prependTo($('#ajax_alert'))
....
$("").addClass('item ' + class_name).append($("").text(text)).prependTo('#ajax_alert')
а вобще у вас ничего так получается и блог хороший я вас в рсс добавил
CTAPbIu_MABP
Честно сказать большой разницы между
не вижу…
Второй вариант, возможно… но опять таки это дело вкуса, нежели ошибка =)
Спасибо, за столь высокую оценку! )))
в первом примере можно прочитать свойство, а можно как вы вызвать метод, а на самом деле не один, это можно увидеть через профайлер в фаербаге, тут задержка не существенная.
со вторым примером все сложнее, когда вы создаете $(”<div><div>”+text+”<div></div>”)
сначала jquery разберет все простой, а потом сложной регуляркой, потом будет проверять на разные таги пока рекурсивно не дойдет до самого внутреннего уровня вложености, приведет таги к каноническому виду, запихнет все что получилось в иннерШТМЛ временного дива и заберет обратно.
а тут все просто $(<div/>).text().appandTo(<div/>)
два раза проверяем простой регуляркой и создаем две новых элемента.
проверить мои слова можно в исходнике jquery в строках 35-92 + 835-852.
ЗЫ ну все есть на вечер материал для статьи…
Скажите мне при чем тут быстродействие??? Один запуск на событие. Зачем гнаться за быстродействием?
Это экономия на спичках. Если бы этот скрипт вызывался в цикле, скажем, хотя бы из 10 000 итераций, тогда это имело бы смысл )))
конкретно в ваших всетофорчиках, если абстрагироваться от всего остального - это экономия на спичках. Если брать реальный проект где кроме ваших светофорчиков стоит еще десяток плагинов и все они “оставляют мелочь на кассе” то в общей сложности получаем торможение. а если у вас как у меня открыто по 20 вкладок в фаерфоксе то такие спички жрут по 300 метров оперативы - не очень приятно.
у меня для вас есть хороший пример почему при 100 итерациях надо экономить на спичках… возьмем например лайтбокс или другой плагин который показывает картинку на сером фоне. так вот если там не экономить то анимация будет не плавной ;)
В данном случае, я говорю о моих “светофорчиках” =)
Я ничего не обобщаю и хорошо понимаю, что для каждого случая свой подход.
ну я и говорю. что мне нравится, тока на будущее вам рассказал то можно технику подправить :)
а вот и снова я
провел скрупулезные тесты производительности так что теперь и вы можете с ним ознакомиться на моем сайте. ссылки давать не буду а то подумаете что за ваш счет пиарюсь)
да и по поводу экономии на спичках, я тут недавно на webo.in видел экономию на поле user-agent… задумайтесь над этим
Вы явно путаетесь ) user-agent передается по сети, а в нашем случае ничего за пределы браузера не выходит, так что Ваш пример не подходит )))
вы что серьёзно думаете что есть смысл экономить на user-agent когда я качаю видео в HDTV o_O? Ну так вот мне с моим компом как бы все равно с какой скоростью работает ваш скрипт, но я ж тут не один)))
Не работает пример :( http://larin.in/ajaxalert/
пожалуйста поправьте
@Томилов Кирил
Попробуйте http://larin.in/ajaxalert/index.html