<script>
function check() {
var pass1=document.getElementById("pass1")
var pass2=document.getElementById("pass2")
var email=document.getElementById("email")
if(pass1.value!=pass2.value){
pass2.setCustomValidity("密码不一致。")
}
else if(pass1.value==pass2.value){
pass2.setCustomValidity("")
}
else if(!email.checkValidity()){
email.setCustomValidity("请输入正确的Email地址。")
}
else{
email.setCustomValidity("")
}
}
</script>
HTML5 已经不是什么新玩意儿，每个人都多少听说过一些HTML5的特性。大多数人认为HTML5无非就是一些像是header, footer, nav, article, section等一样新的语义标签而已，但是很多人不知道它有很多我们可以使用的很棒的特性，例如：•地理定位 API
•HTML5 Details Tag
•HTML5 表单特性
•HTML5 表单验证
•HTML5 Placeholder
本文将向你介绍HTML5带来的新特性：Notification API
该特性最有名的运用便是在你收到一封 Gmail 时的提醒，如果你当前打开了一个 Gmail
的页面，你会在屏幕右下角收到一个带标题和简短信息的d出框。接下来我们将看看怎么才能利用该 API 来创建自己的提示信息。
浏览器支持情况
当前只有 Chrome 19+ Safari 6+支持，点击查看当前 Notification API 支持情况
Notification API
在 Notification API 中会用到两个对象，第一个就是 notification 对象。
interface Notification : EventTarget {
// display methods void show()
void cancel()
// event handler attributes attribute Function ondisplay
attribute Function onerror
attribute Function onclose
attribute Function onclick
}
这就是notification需要使用到的接口，它有2个方法和相关的4个属性。
Notification 方法
用来显示和隐藏提示框的方法：
Show - 该方法用来显示一个提醒
Cancel - 该方法用来移除提醒，如果提醒当前被现实则会被隐藏，如果还未被显示，则将被阻止显示。
Notification 属性
通知属性用作事件监听器，监听提醒中的不同事件：
ondisplay - 当 notification 被显示时调用
onerror - 当 notification 出现错误时调用
onclose - 当 notification 关闭时调用
onclick - 当提示框被点击时调用
第二个需要的就是 NotificationCenter 接口。
interface NotificationCenter {
// Notification factory methods. Notification createNotification(in DOMString iconUrl, in DOMString title, in DOMString body) throws(Exception)
optional Notification createHTMLNotification(in DOMString url) throws(Exception)
// Permission values const unsigned int PERMISSION_ALLOWED = 0
const unsigned int PERMISSION_NOT_ALLOWED = 1
const unsigned int PERMISSION_DENIED = 2
// Permission methods int checkPermission()
void requestPermission(in Function callback)
} interface Window {
...
attribute NotificationCenter webkitNotifications
...
}
Notification
center 用来创建 notification 对象，并检查当前页面是否有显示该对象的权限。
使用 Notification center 时需要用到4个方法：
createNotification - 如果 notification 有权限被显示，呢么该方法将会创建一个
notification 对象，并为其填充相关的内容。如果页面没有允许 notification ，那么将抛出一个安全异常。
createHTMLNotification - 该方法类似于 createNotification
，若页面有权限显示 notification 它会返回一个相关的对象。该方法使用了一个 URL 参数来加载要显示的 HTML 内容。
checkPermission - 该方法返回该页面使用 notification
的整形权限值。PERMISSION_ALLOWED = 0,
PERMISSION_NOT_ALLOWED = 1, 或者
PERMISSION_DENIED = 2
requestPermission - 该方法将向用户请求询问显示提示框的权限。
检查浏览器是否支持 Notification
当你准备用 notification API 做点什么之前，你需要先检查浏览器是否支持，你可以使用一下代码来检查：
/**
* Check if the browser supports notifications
*
* @return true if browser does support notifications
*/
function browser_support_notification()
{
return window.webkitNotifications
}
获得显示权限
显示一个提醒之前你需要得到用户的允许，获得此权限你需要做的就是使用 requestPermission() 方法：
/**
* Request notification permissions
*/ function request_permission()
{
// 0 means we have permission to display notifications if (window.webkitNotifications.checkPermission() == 0) {
window.webkitNotifications.createNotification()
} else {
window.webkitNotifications.requestPermission()
}
}
显示纯文本提示框
创建一个显示纯文本的提示框前你需要检查是否有权限显示。如果有权限我们就能使用createNotification()方法创建一个新的
notification 了，使用 createNotification() 传递图片、标题以及描述信息3参数即可。
/**
* 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)
}
}
显示 HTM L 提醒框
在显示之前我们也需要检查显示权限，如果有权限，我们可以使用createHTMLNotification(url) 方法创建，传递的 url
地址即我们要显示的页面。
/**
* Create a notification box with html inside
*/
function html_notification(url)
{
if (window.webkitNotifications.checkPermission() == 0) {
return window.webkitNotifications.createHTMLNotification(url)
}
}
通过jquery的show()和hide()函数联合使用，实现d出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的d出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、d出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看d出窗口结果：
七、关闭d出窗后，打开开发者中心，如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）