2365
- 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 - Категория уведомления (позволяет группировать похожие уведомления, заменяя их более новыми)
Можете посмотреть пример того что получилось
Можешь почитать и вот эту статейку "табличная верстка"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.