5个你不知道道的HTML5的插口详细介绍_写一个小程序要多少钱_凡科小程序官网_微信小程序云开发_手机小程序制作_做一个小程序要多少钱

写一个小程序要多少钱_凡科小程序官网_微信小程序云开发_手机小程序制作_做一个小程序要多少钱移动版

建站首页 > 新闻 > 行业资讯 >

5个你不知道道的HTML5的插口详细介绍

原文详细地址:5 HTML5 APIs You Didn’t Know Existed
原文时间: 2010年09月27日
汉语翻译时间: 2013年8月7日
当人们看到或讲出"HTML5"这个词的情况下,估算最少有1半以上的人,会想到到她既是1个性化感而又填满风采的漂亮美女,另外也是1只能把你搞得焦头烂额的独角兽,这能怪大家这些开发设计者吗?
大家留意到那些基本的Api停滞不前发展趋势了这般悠长的時间(大约是1999⑵009),以致于像"placeholder"这样基本的1个额外作用,也要花销大家不短的時间来解决。
虽然当今的流行访问器早已完成了许多的HTML5新特点,可是许多开发设计者压根就没留意到这些更简约,也很有效的API。
本系列文章内容详细介绍这些插口API,另外也期待能激励更多开发设计者去探寻那些还不广为流传的API。
Element.classList
这个特性早已公布了好几年,根据classList,大家能够根据JavaScript来控制最底层css的class特性.
编码以下:

拷贝编码
编码以下:

// 应用classList特性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,沒有则加上
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 实际上,本涵数 toggleClassList 假如适用的话,
// 那末下面的编码就不容易被实行,此处仅作演试,请灵便运用
// 2. classList API
// element 的class特性是不是包括 hide 这个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 加上hide类
element.classList.add(cName);
}
return true;
};

ContextMenu API
经检测chrome28无论用。。。
新的API,ContextMenu 是极好的插口: 此插口容许你很简易地加上菜单项到访问器的左右文菜单(右键菜单),而并不是去遮盖访问器的默认设置右键菜单。
必须留意的是,你最好是选用js脚本制作来动态性的建立菜单contextmenu,这样能够防止网页页面禁用JS脚本制作的状况 下出現过剩的HTML编码。
编码以下:

拷贝编码
编码以下:

<div class="hide">
<!-- contextmenu 特定了应用哪一个左右文菜单。 -->
<!-- !!!不知道道为何,我的访问器上这个配备不起功效。 -->
<section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;">
<h1>点一下此地区查询菜单</h1>
<!--
以便编码构造的清楚,把menu元素放到了要应用的元素內部,实际上你还可以放到外界的任何地区:
-->
<!-- 加上菜单,至于照片标志,请自身设定。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="更新网页页面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"></menuitem>
<menu label="共享到..." icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png">
<menuitem label="微博" icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png" onclick="window.location.href='http://www.weibo.com'"></menuitem>
<menuitem label="腾迅新浪微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.href='http://t.qq.com'"></menuitem></menuitem>
</menu>
</menu>
</section>
</div>

Element.dataset
数据信息集(dataset) API 容许开发设计者对DOM元素设定(set)和获得(get) 以 data- 前缀开始的特性值。
编码以下:

拷贝编码
编码以下:

<div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="铁锚" data-blog-url="http://blog.csdn.net/renfufei"></div>


拷贝编码
编码以下:

function testDataset(){
//
var intro = document.getElementById("intro");
// 留意这个并不是 id特性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰取名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:"+id
+",website:"+website
+",blogUrl:"+blogUrl
+",myName:"+myName
;
//
warn(msg);
};

沒有甚么好说的,和classList1样,简易却好用。(想想,是不是更改了后台管理和前台接待JS的一些互动和解耦?)
window.postMessage API
IE8 早已适用 postMessage API 好几年了,此API容许window 和iframe 元素之间相互之间传送信息。
跨域适用哦。 编码以下:

拷贝编码
编码以下:

// From window or frame on domain 1, send a message to the iframe which hosts another domain
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");
// From inside the iframe on different host, receive message
window.addEventListener("message", function(event) {
// Make sure we trust the sending domain
if(event.origin == "http://davidwalsh.name") {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage("Hello back!");
}
]);
// message 只容许string 种类的数据信息,但是您可使用 JSON.stringify 和 JSON.parse 传送更多成心义的信息。

autofocus Attribute
autofocus 特性保证当网页页面载入后,给定的 BUTTON,INPUT或 TEXTAREA 元素可以全自动得到聚焦点。

拷贝编码
编码以下:

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

autofocus 特性关键用在简易的键入网页页面,详细信息请参照:autofocus 特性
各访问器厂商对这些API的适用度不尽相同,因此在应用以前最好是检验1下适配性,花1些時间来阅读文章上面所列出的API,您可能对她们掌握和把握更多。
一部分的检测编码以下:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title>5个你不知道道的 HTML5 API插口演试 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei">
<meta name="Description" content="original=http://davidwalsh.name/html5-apis">
<style>
.hide{ display:none}
.poplayer{ z-index:999; position:absolute;background-color:#fff; top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;}
.close{ top:3px; right:10px;position:absolute;}
</style>
<script>
// 显示信息警示信息内容
function warn(msg){
warn = warn || "1个未知警示!";
if(window.console){
console.warn(msg);
} else {
alert(msg);
}
};
// 应用classList特性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,沒有则加上
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 实际上,本涵数 toggleClassList 假如适用的话,
// 那末下面的编码就不容易被实行,此处仅作演试,请灵便运用
// 2. classList API
// element 的class特性是不是包括 hide 这个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 加上hide类
element.classList.add(cName);
}
return true;
};
// 应用className特性(Dom元素,css类名)
function toggleClassName(element,cName){
var className = element.className || "";
// 去掉首尾的空白
cName = cName.replace(/^\s*|\s*$/g,"");
// cName 正中间假如含有时间白标识符,则不成功. 假如好些益处理,能够拆分成数字能量数组,单独解决
var blankReg = /\s+/;
if(blankReg.test(cName)){
warn("'"+cName+"'正中间含有时间白标识符");
return false;
}
// 正则表达式, \b 表明可见持续标识符的界限,能够这么了解:
// "hide2 hide hide myname" 那末,
// hide2 的前后左右都有1个虚似的\b ,hide 前后左右也是有,
// 可是 hi 和 de之间则沒有。
// g 表明单行全局性
//var rep = /\bhide\b/g;
var rep = new RegExp("\\b" + cName + "\\b", "g");
if(rep.test(className)){
className = className.replace(rep,"");
} else {
className += " "+cName;
}
// 更换新className。
element.className = className;
return true;
};
// 涵数,切换(元素id,className)
function toggleClass(elementId,cName){
// 获得1个DOM元素
var element = document.getElementById(elementId);
// 假如不存在元素
if(!element){
warn("id为"+elementId+"的元素不存在");
return false;
}
if(!element.classList){
warn("id为"+elementId+"的元素不适用classList特性,将应用别的方式来完成");
return toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
function testDataset(){
//
var intro = document.getElementById("intro");
// 留意这个并不是 id特性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰取名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:"+id
+",website:"+website
+",blogUrl:"+blogUrl
+",myName:"+myName
;
//
warn(msg);
};
// dom载入后 实行
window.addEventListener("DOMContentLoaded", function() {
var open = document.getElementById("open");
var close = document.getElementById("close");
open.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
close.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
//
testDataset();
}, false);
</script>
</head>
<body>
<div>
<div id="diary2" class="diary poplayer hide">
<a href="javascript:void(0)" _fcksavedurl=""javascript:void(0)"" id="close">关掉</a>
<div id="loading" class="loading hide" style="z-index:1; position: absolute; left: 40%; top: 30%; width: 104px; height: 104px;opacity: 0.5;background: #000000;border: 0px solid #000000;border-radius: 10px;-webkit-border-radius: 10px;">
<img src="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" alt=""
style="position:absolute; left:26px; top:10px;width: 50px;height: 50px;border-radius: 10px;-webkit-border-radius: 10px;">
<div class="loadingtext" style="position:absolute;left: 12px;top: 76px;color: #ffffff;">正在载入中</div>
</div>
</div>
<div>
<a href="javascript:void(0)" id="open">开启</a>
</div>
</div>
<div class="hide">
<!-- contextmenu 特定了应用哪一个左右文菜单。 -->
<!-- !!!不知道道为何,我的访问器上这个配备不起功效。 -->
<section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;">
<h1>点一下此地区查询菜单</h1>
<!--
以便编码构造的清楚,把menu元素放到了要应用的元素內部,实际上你还可以放到外界的任何地区:
-->
<!-- 加上菜单,至于照片标志,请自身设定。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="更新网页页面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"></menuitem>
<menu label="共享到..." icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png">
<menuitem label="微博" icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png" onclick="window.location.href='http://www.weibo.com'"></menuitem>
<menuitem label="腾迅新浪微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.href='http://t.qq.com'"></menuitem></menuitem>
</menu>
</menu>
</section>
</div>
<div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="铁锚" data-blog-url="http://blog.csdn.net/renfufei"></div>
</body>
</html>
(责任编辑:admin)