Хаки и Скрипты Next Generation CMS

Хочу уведомления на рабочем столе

irbees2008 irbees2008 Опубликовано - 10 - мая Диалоги и lightbox
2358 - 0
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет,давно заметил на многих сайтах есть скрипты вывода уведомлений на рабочем столе. Порывшись в нете обнаружил вот это Notification API - Уведомления на рабочем столе.
Но чтобы выводить такие уведомления на рабочем столе ,пользователь должен разрешить их выводить.

Поддержка браузерами: *

Цитата:
Chrome - начиная с версии 22
Firefox (Gecko) - начиная с версии 22
Opera - начиная с версии 25
Safari - начиная с версии 6 (только Mac OSX 10.8+)
Internet Explorer - как всегда, не поддерживает
Поддержка мобильными браузерами: *
Цитата:
Firefox OS - начиная с версии 1.2
Chrome for Android - поддерживает
Android Webview - поддерживает

Итак приступим
jQuery, поэтому убедитесь что он у Вас подключен:
Код:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Добавим элемент на страницу, по которому будем кликать, и вызывать уведомления
Код:
<span>Click Me</span>

В js добавляем уже знакомую нам функцию:
Код:
function myNotification(titleNotify, optionsNotify) {
if (!('Notification' in window)) {
alert('Ваш браузер не поддерживает уведомления рабочего стола');
}
else if (Notification.permission === 'granted') {
var notification = new Notification(titleNotify, optionsNotify);
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === 'granted') {
var notification = new Notification(titleNotify, optionsNotify);
}
});
}
}

И ниже пишем обработчик события "клик", по нашему элементу:
Код:
jQuery(document).ready(function($){
$('span').bind('click', function(){
var titleNotify = 'Привет вы на моём сайте';
var textNotify = 'Вот так отображается уведомление на рабочем столе';
var iconNotify = $('[type="image/vnd.microsoft.icon"]').attr('href');
var optionsNotify = {
body: textNotify,
icon: iconNotify,
tag: 'blogpost'
}
myNotification(titleNotify, optionsNotify);
});
});

titleNotify - Заголовок уведомления
optionsNotify - Дополнительные опции уведомления
При этом, optionsNotify является объектом со своими свойствами, и вот некоторые из них:
body - Основное содержимое уведомления
icon - Иконка уведомления
tag - Категория уведомления (позволяет группировать похожие уведомления, заменяя их более новыми)

Можете посмотреть пример того что получилось


Можешь почитать и вот эту статейку "Несколько вариантов оформления поисковых форм"

Опрос

Ваше мнение

TWIG -что это?
Результаты

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

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4397 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 662
  • Онлайн всего: [3]
  • Гости: [3]
  • Были сегодня : [3] Google, Яндекс, Яндекс
  • SQL запросов: 25
  • Генерация страницы: 0.479сек
  • Потребление памяти: 6.106 Mb 
  •   Яндекс.Метрика