Html5 masaüstü bildirim özelliği

Merhaba arkadaşlar bu dersimizde HTML5 kullanarak masaüstü bildirim özelliğini kullanacağız.

 

Nedir bu masaüstü bildirim özelliği ve bu özelliği nereden hatırlıyoruz.

 

MSN programının yeni bildirim geldiğinde sağ alt köşede gözüken yeni mesaj kısmının html5 versiyonudur bu örneğimiz.

Kodları daha taslak aşamasındadır ama şuan itibariyle sorunsuz çalışmaktadır.

 

Örnek kod ve videomuz mevcuttur

 

<!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=utf-8″ />
<title></title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.2.min.js”>
</script>
</head>

<body>
<button id=”izin”>Izin</button>
<button id=”test”>Test</button>
<script type=”text/javascript”>
$(‘button#izin’).click(function(){
if(window.webkitNotifications.checkPermission() == 1){
window.webkitNotifications.requestPermission();
}else{
alert(‘Bu site için izin işlemi daha önceden yapılmıştır’);
}});
$(‘button#test’).click(function(){
var test = window.webkitNotifications.createNotification(‘http://www.omerkadiroruc.com/avatar.jpg’,
‘Ömer Kadir Oruç’,’Merhaba’);
test.ondisplay = function(){
alert(‘bildirim göründü’);
}
test.onclose = function(){
alert(‘bildirim kapatıldı’);
}
test.show();
});
</script>
</body>
</html>

 

Comments
  1. 5 sene ago
  2. 5 sene ago
    • 5 sene ago
  3. 4 sene ago
    • 4 sene ago

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir