from here 如何使用 HTML5 的 Notification API
it run like this:
i want to used this function to pkrssweb.
this is his sample code:
<html><head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset="utf-8">
<title>HTML5 Notification API Demo</title>
<style>
body{
font-family: 'Lato', sans-serif;
color:#444;
font-size:1.6em;
}
.ad_container{
margin-bottom:20px;
height:100px;
position: absolute;
right:0;
}
.container{
width:90%;
margin:30px auto;
padding:25px;
min-height:400px;
height:auto;
}
.inner_container{ float:left; width:100%; clear:both; background:#fff; }
.aligncenter{
width:80%;
margin:20px auto;
text-align: center;
}
.half
{
width:40%;
float:left;
display:inline-block;
}
/**
* Messages
*/
.hidden
{
display:none;
}
/**
* Permission button
*/
input[type=button]
{
padding:1.8em;
background:#eee;
border:1px solid #555;
width:300px;
}
input[type=button]:hover
{
background: #f5f5f5;
cursor: pointer;
}
input[type=text]
{
padding:1em;
border:1px solid #555;
width:200px;
}
/**
* Alert Boxes
*/
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
color: #c09853;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
border-radius: 4px;
}
.alert-heading { color: inherit; }
.alert .close { position: relative; top: -2px; right: -21px; line-height: 18px; }
.alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-danger,
.alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }
.alert-info { color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; }
.alert-block { padding-top: 14px; padding-bottom: 14px; }
.alert-block > p,
.alert-block > ul { margin-bottom: 0; }
.alert-block p + p { margin-top: 5px; } </style>
</head>
<body>
<section class="container">
<div class="inner_container">
<div id="message" class="alert alert-success">Your browser does support the Notification API.</div>
<div id="notification_demo" class="aligncenter">
<p><input type="button" id="ask_permission" value="Grant Permission To Display Notifications" class="hidden"></p>
<div id="plain_text" class="half">
<h3>Display Plain Text</h3>
<form id="plain_text_form">
<p>Icon: <input type="text" id="icon" value="/img/logo.gif"></p>
<p>Title: <input type="text" id="title" value="Notification Demo"></p>
<p>Text: <input type="text" id="text" value="Example of text in notification"></p>
<p><input type="button" id="text_button" value="Display Notification"></p>
</form>
</div>
<div id="html_notification" class="half">
<h3>Display HTML</h3>
<form id="html_form">
<p>URL: <input type="text" id="url" value="http://www.baidu.com"></p>
<p><input type="button" id="html_button" value="Display Notification"></p>
</form>
</div>
</div>
</div>
</section>
</body></html><script>/**
* Demo for HTML5 Notification API
* @author Paul
*/
(function($) {
$(document).ready(function() {
init_document();
});
/**
* Init document
*/
function init_document()
{
// Check browser support
check_browser_support();
// Request permission
$('#ask_permission').on("click", request_permission);
// Check if we have permission
check_permission();
// Plain text notification demo
$('#text_button').on("click", function(){
var notification = plain_text_notification($("#icon").val(), $("#title").val(), $("#text").val() );
notification.show();
});
// HTML notification demo
$('#html_button').on("click", function(){
var notification = html_notification( $("#url").val() );
notification.show();
});
}
/**
* Check browser support and display message if not supported
*/
function check_browser_support()
{
if(!window.webkitNotifications){
$('#message').removeClass()
.addClass("alert alert-error")
.text("Your browser does not support the Notification API please use Chrome for the demo.");
$('#notification_demo').hide();
}
else
{
$('#message').removeClass()
.addClass("alert alert-success")
.text("Your browser does support the Notification API.");
}
}
/**
* Check if the browser supports notifications
*
* @return true if browser does support notifications
*/
function browser_support_notification()
{
if (window.webkitNotifications) {
return true;
}
else {
return false;
}
}
/**
* Request notification permissions
*/
function request_permission()
{
// 0 means we have permission to display notifications
if (window.webkitNotifications.checkPermission() != 0) {
window.webkitNotifications.requestPermission(check_permission);
}
}
/**
* Checks to see if notification has permission
*/
function check_permission()
{
switch(window.webkitNotifications.checkPermission()) {
case 0:
// Continue
$('#ask_permission').addClass('hidden');
$('.half').removeClass('hidden');
return true;
break;
case 2:
$('#message').removeClass()
.addClass("alert alert-error")
.text("You have denied access to display notifications.");
$('.half').addClass('hidden');
break;
default:
// Fail
$('#ask_permission').fadeIn();
$('.half').addClass('hidden');
return false;
break;
}
}
/**
* Create a plain text notification box
*/
function plain_text_notification(image, title, content)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createNotification(image, title, content);
}
}
/**
* Create a notification box with html inside
*/
function html_notification(url)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createHTMLNotification(url);
}
}
})(jQuery);</script>
<style>
<!--.Controls{position:absolute;z-index:9999;right:30px;top:10px;width:80px;height:30px;line-height:30px;background-color:#eee;opacity:0.5;font-size:10px;text-align:center;}
.Controls a{text-decoration:none;margin:10px 5px;}-->
.GoEdit{opacity: 0; position: fixed; top: -1px; right: -1px; padding: 5px 10px; background-color: rgb(204, 204, 204); color: rgb(51, 51, 51); text-shadow: rgb(255, 255, 255) 0px 1px 1px; border-top-right-radius: 5px; border: 1px solid rgb(153, 153, 153); text-decoration: none; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: 'Helvetica Neue', Arial, Helvetica; -webkit-transition: opacity 100ms ease-out; background-position: initial initial; background-repeat: initial initial; }
</style>
<script type="text/javascript" src="/tools/jsbin/edit.js"></script>
<div style="display:none"><script src="http://s9.cnzz.com/stat.php?id=4420195&web_id=4420195&show=pic1" language="JavaScript"></script></div>
<!-- Generated by OSCTools.NET (Fri Nov 09 08:41:02 CST 2012) 4ms –>
1.wrap in class, 封装为类
'notificationapi':{
'inited':false,
'init':function(){
if(this.inited)
return;
this.inited = true;
if(!this.browser_support_notification())
return;
this.request_permission();
},
/**
* Check if the browser supports notifications
*
* @return true if browser does support notifications
*/
'browser_support_notification': function()
{
if (window.webkitNotifications) {
return true;
}
else {
return false;
}
},
/**
* Request notification permissions
* check_permission is function
*/
'request_permission': function(check_permission)
{
if(!check_permission)
check_permission = this.check_permission;
// 0 means we have permission to display notifications
if (window.webkitNotifications.checkPermission() != 0) {
window.webkitNotifications.requestPermission(check_permission);
}
},
/**
* Checks to see if notification has permission
*/
'check_permission':function ()
{
switch(window.webkitNotifications.checkPermission()) {
case 0: // ok Continue
return true;
break;
case 2: // You have denied access to notifications
break;
default: // Fail
return false;
break;
}
return false;
},
/**
* Create a plain text notification box
*/
'plain_text_notification':function (image, title, content)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createNotification(image, title, content);
}
return null;
},
/**
* Create a notification box with html inside
*/
'html_notification':function (url)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createHTMLNotification(url);
}
return null;
}
}
2.init:
$(".contentLink").live("click", function() {
pkrsslib.notificationapi.init();
pksetting.user.selectedCId = $(this).data("entryid");
pksetting.saveUserData();
});
3.use it
var notification = pkrsslib.notificationapi.plain_text_notification(null, entry.title, entry.desc );
if(notification)
notification.show();
4. description
in here pkrsslib is my topmost class. your need changed it by yourself.
error: Webkit notifications requestPermission function doesn't work
fixed:This method should only be called while handling a user gesture;
webkitNotifications.requestPermission 只在鼠标或键盘触发的响应事件中执行
No comments:
Post a Comment