U途骑士
- UID36219
- 粉丝1
- 关注0
- 发帖数1
- 铜币12枚
- 威望12点
- 贡献0点
|
楼主#
更多
发布于：2015-05-04 02:49
[tr][td] 译文来源：http://www.ido321.com/1130.html
原文：HTML 5 Notification
译文：HTML 5 的消息通知机制
译者：dwqs
HTML 5 已经被应用到Web开发中。跟平常一样，任何一个软件新版本的发布都期待一些新的特性，这对HTML 5也不例外。为了仅仅通过HTML提高用户交互，HTML 5已经提供了很多新的API。
是不是非常有趣呢？并且HTML 5已经和CSS 3结合的非常棒了。
因此，我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能，例如Geolocation, Notification, File, 等等，第一篇文章是和Notification API相关。
首先要意识到是，HTML 5的特性和API仅能在支持HTML 5的浏览器中正常使用，如果浏览器不支持HTML 5，就不能使用HTML 5在网页中实现任何一个功能了。现在就来了解一下notification API吧。
什么是HTML 消息通知？
HTML消息通知是指我们可以告诉用户一个确定的事件行为，即使此时用户在浏览器的另一个选项卡。这个通知对于New Mail, New Tweet等事件是非常有用的。
怎么使用？
要使用Notification API，有几个步骤：首先，要从用户那里获取显示通知的许可，只有当用户允许时，才能显示通知给用户。所以先要征求用户的许可而不是直接显示通知。然后，
获取用户许可之后，我们可以显示两种类型的信息：
Normal/Default Notification
HTML Notification
最后执行通知代码。
我已经创建了一个显示通知的JavaScript函数，注意：函数仅限用于这篇文章，因为有很多种方式可以按照每个人的需求去扩展。
HTML：
[*]Show Normal Notification
[*]
[*]Normal Notification
[*]
[*]
[*]Show HTML Notification
[*]
[*]HTML Notification
[*]
复制代码
JavaScript
[*]// Function to show Notification
[*]function createNotification(type)
[*]{
[*] if(type == '')
[*] type = 'normal';
[*]
[*] if(type != 'html')
[*] {
[*] var title ="You have received HTML 5 Notification";
[*] var msg="Content Goes Here......";
[*] var notification = window.Notifications.createNotification("1.png", title, msg);
[*] }
[*] else
[*] {
[*] var notification = window.Notifications.createHTMLNotification('content.html');
[*] }
[*] notification.show();
[*]}
[*]
[*]// Binding the Click event on buttons.
[*]
[*]$(document).ready(function ()
[*]{
[*] if (window.webkitNotifications)
[*] {
[*] window.Notifications = window.webkitNotifications;
[*] $('#show_notification').click(function ()
[*] {
[*] if (window.Notifications.checkPermission() == 0)
[*] {
[*] createNotification('normal');
[*] }
[*] else
[*] {
[*] window.Notifications.requestPermission();
[*] }
[*] });
[*]
[*] $('#show_html_notification').click(function ()
[*] {
[*] if (window.Notifications.checkPermission() == 0)
[*] {
[*] createNotification('html');
[*] }
[*] else
[*] {
[*] window.Notifications.requestPermission();
[*] }
[*] });
[*] }
[*] else
[*] {
[*] alert('HTML 5 Notifications are not supported on this browser/OS.');
[*] }
[*]});
复制代码
Demo
查看Demo： live demo （ps：用Web Kit浏览器打开，此文写于2012.04）
总结
HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器，对于HTML 5 notification，Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。[/td][/tr]
|
