Рейтинг@Mail.ru
загрузкаидет загрузка

Уведомления о событиях на чистом JavaScript

После внедрения AJAX в плагин закладок bookmarks появилась необходимость как-то сообщать пользователю, что добавление или удаление прошло успешно.

Стандартный alert() больно некрасив, вид его зависит от используемого браузера, да и требует лишний клик на кнопке ОК.

Долго искал в гугле какую-то открытую реализацию такого механизма, но находил лишь плагины к фреймворкам, использование которых имеет смысл только тогда, когда вы понимаете, что оно вам дает. В данном случае подключать 80кб jQuery абсурд.

Сам я с JS практически не дружу, простой код понимаю, но с нуля написать нечто пока проблематично.

Тогда я пошел на Хабр и нашел в исходниках интересную функцию, которая выводит эти самые окошки с различными вариациями, написанную с использованием MooTools. Полчаса и получилось тоже самое, но на чистом JavaScript'е.

javascript-notification.png (10.74 Kb)



Появление уведомления реализуется через вызов функции futu_alert(header, text, close, className)

Параметры:
  1. header - заголовок сообщения
  2. text - тело сообщения
  3. close - логическая переменная true/false, которая отвечает за наличие кнопки закрытия окна (true - окно висит пока его не закроют, false - автоскрытие через 3 секунды)
  4. className - тип всплывающего окна, от которого зависит цвет его заливки. Принимает значения message/error/save. Можно добавить свои варианты в CSS
function futu_alert(header, text, close, className) {
/* если div с ID == futu_alerts_holder не найден
* (окошко вызывается впервые), то создаем необходимые div'ы
*/
if (!document.getElementById('futu_alerts_holder')) {

var futuAlertOuter = document.createElement('div');
futuAlertOuter.className = 'futu_alert_outer';
document.body.appendChild(futuAlertOuter);

var futuAlertFrame = document.createElement('div');
futuAlertFrame.className = 'frame';
futuAlertOuter.appendChild(futuAlertFrame);

var futuAlertsHolder = document.createElement('div');
futuAlertsHolder.id = 'futu_alerts_holder';
futuAlertsHolder.className = 'futu_alerts_holder';
futuAlertFrame.appendChild(futuAlertsHolder);
}
// создаем div с необходимым типом окна
var futuAlert = document.createElement('div');
futuAlert.className = 'futu_alert ' + className;
document.getElementById('futu_alerts_holder').appendChild(futuAlert);
futuAlert.id = 'futu_alert';

// создаем div с заголовком окна
var futuAlertHeader = document.createElement('div');
futuAlertHeader.className = 'futu_alert_header';
futuAlert.appendChild(futuAlertHeader);

futuAlertHeader.innerHTML = header;

// добавляем кнопку закрытия окна, если необходимо
if (close) {
var futuAlertCloseButton = document.createElement('a');
futuAlertCloseButton.href = '#';
futuAlertCloseButton.className = 'futu_alert_close_button';
futuAlertCloseButton.onclick = function(ev) {
if(!ev) {
ev=window.event;
}
if (!document.all) ev.preventDefault(); else ev.returnValue = false;
document.getElementById('futu_alerts_holder').removeChild(futuAlert);
}
futuAlert.appendChild(futuAlertCloseButton);

var futuAlertCloseButtonIcon = document.createElement('img');
// здесь не забывайте указать свой путь к пиктограмме закрытия окна
futuAlertCloseButtonIcon.src = '/engine/plugins/bookmarks/img/btn_close.gif';
futuAlertCloseButton.appendChild(futuAlertCloseButtonIcon);
}

// создаем div с текстом сообщения
var futuAlertText = document.createElement('div');
futuAlertText.className = 'futu_alert_text';
futuAlert.appendChild(futuAlertText);


futuAlertText.innerHTML = text;

futuAlert.style.position = 'relative';
futuAlert.style.top = '0';
futuAlert.style.display = 'block';


// если сообщение без кнопочки "Закрыть", то вызываем удаление окна через 3 секунды
if (!close) {
/* addEvent("click",function(){
document.getElementById('futu_alerts_holder').removeChild(futuAlert);
}, document.getElementById('futu_alert')); */
setTimeout(function () { document.getElementById('futu_alerts_holder').removeChild(futuAlert); }, 3000);

}
}

Закомментированный addEvent служит для навешивания функции преждевременного закрытия окна, не дожидаясь трех секунд. А закомментировал я его потому как addEvent это своя отдельная самописная функция, обеспечивающая кроссбраузерное присоединение обработчика события к элементу.

Google прекрасно найдет вам несколько ее реализаций, например:
function addEvent(evType, fn, elem) {
if (elem.addEventListener) {
elem.addEventListener(evType, fn, false);
}
else if (elem.attachEvent) {
elem.attachEvent('on' + evType, fn)
}
else {
elem['on' + evType] = fn
}
}

CSS

.futu_alert_outer {
position: fixed;
top: 0; left: 0;
width: 100%;

z-index:9999;
}
.futu_alert_outer .frame {
position:relative;
z-index:9999;
}
.futu_alerts_holder {
position:absolute;
left:69%; top:0;
width:30%;
z-index:9999;
}

.futu_alerts_holder .futu_alert {
position:absolute;
top:-1000px;
background-color:#FFEBA0;
font:1.2em Tahoma, sans-serif;
border:1px solid #FFFFFF;
margin-left:60px;
}
.futu_alerts_holder .futu_alert .futu_alert_header {
font-size:1.2em;
margin:10px 20px 0;
}
.futu_alerts_holder .futu_alert .futu_alert_text {
font-size:0.9em;
margin:10px 20px;
}
.futu_alerts_holder .futu_alert .futu_alert_close_button {
position:absolute;
padding:10px;
top:0;
right:0;
outline:none;
}
.futu_alerts_holder .message {
color:#FFF;
background-color:#6690C9;
}
.futu_alerts_holder .error {
color:#FFF;
background-color:#ed6060;
}
.futu_alerts_holder .save {
color:#FFF;
background-color:#73a168;
}

Комментарии:
  • RocketBoy
  • 1.01.2011 - 20:52 / RocketBoy
  • 100% нужная тема

  • Wolverine
  • 1.01.2011 - 20:57 / Wolverine
  • Осталось дождаться внедрения этой функциональности в ядро для унификации уведомлений

  • RocketBoy
  • 1.01.2011 - 22:13 / RocketBoy
  • Wolverine, проясни плиз, я нуб в этих делах.
    Ты написал про Мутулз, т.е. надо будет подключать его или этот функционал по умолчанию в двиг?

  • Wolverine
  • 2.01.2011 - 00:10 / Wolverine
  • Не, в том и кайф, что никакие фреймворки не нужны. Любой программер может затащить код этой функции себе в плагин и уведомлять о неких событиях.

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

  • RocketBoy
  • 2.01.2011 - 00:44 / RocketBoy
  • А вождь вообще за или хз? :)))

  • Wolverine
  • 2.01.2011 - 00:53 / Wolverine
  • Я ему скинул, он сказал "Круто" :) Будем ждать реакции)) Пока буду использовать в bookmarks, посмотрим как полетит...

  • RocketBoy
  • 2.01.2011 - 00:55 / RocketBoy
  • Будем лоббировать на форуме :)))
    А фишка действительно крутая будет, я люблю всякие ajax штучки

  • 3.02.2011 - 11:04 / stdex
  • Уже давно написано:
    http://codecanyon.net/item/istackmessages/full_screen_preview/88677
    http://depositfiles.com/ru/files/jeszbvdqo

  • Wolverine
  • 3.02.2011 - 17:13 / Wolverine
  • При этом тебя не смущает mootools.core.js в архиве? :)

  • 3.02.2011 - 22:49 / stdex
  • Неа. xD

  • 13.10.2011 - 17:56 / koliajim provider_img}
  • Если bookmarks установлен, то после заливки всего выше изложенного работать будет, или что-то нужно предпринять?

  • Wolverine
  • 14.10.2011 - 00:06 / Wolverine
  • Ничего заливать не надо, в bookmarks все это встроено


последние комментарии

Ooooops

Looks like Twitter's feed isn't working at the moment.