HTML5学前热身 实用技巧及应用详解

二十六、data属性(TheDataAttribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：

<h1idh1id=someIdcustomAttribute=value>小样，胆儿挺肥的呢</h1> 

校验器会小题大做!但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助。

二十七、Output元素

正如你可能预料到的，output元素被用来显示部分计算，例如，如果你想显示一个鼠标的位置，或者是一系列数字的总和坐标，这个数据应被插入到output元素中。举个简单的例子，当提交按钮被按下，我们用JavaScript将两个数字相加值插入到空的output中。

<formactionformaction=""method="get"> 
<p>10+5=<outputnameoutputname="sum"></output></p> 
<buttontypebuttontype="submit">计算</button></form>(function()  
{varf=document.forms[0];if(typeoff['sum']!=='undefined')  
{f.addEventListener('submit',function(e){f['sum'].value=15;e.preventDefault();  
},false);  
}  
else  
{alert('你的浏览器尚未准备好！');  
}  
}  
)  
(); 

自己测试了下，貌似现在只有在Opera浏览器下有上佳的效果：

如果您现在使用的是较新版本的Opera浏览器，您可以狠狠地点击这里：HTML 5结果输出框demo。此元素也可以接受一个属性，它反映了输出相关元素的名称，类似label工作原理。

二十八、使用区域input创建滑块

HTML 5引进了range类型的input。

<inputtypeinputtype="range"> 

最值得注意的是，它可以接收min,max,step,和value属性，等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的!

第一步：标签

首先，创建标签

<formmethodformmethod="post"> 
<h4>音量控制</h4> 
<inputtypeinputtype="range"name="range"min="0"max="10"step="1"value=""/> 
<outputnameoutputname="result"> 
</output> 
</form> 

第二步：CSS

下面，我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。

input{font-size:14px;font-weight:bold;}input[type=range]:before  
{content:attr(min);padding-right:5px;}input[type=range]:after  
{content:attr(max);padding-left:5px;}output  
{display:block;font-size:5.5em;font-weight:bold;} 

第三步：JavaScript

◆检测我们的浏览器是否认识rangeinput，如果不，显示提示。

◆当用户移动滑块的时候，动态改变output的值。

◆监听，当用户离开滑块，插入值，同时本地存储。

◆然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。

(function(){  
    var  f=document.forms[0],  
    range=f['range'],  
    result=f['result'],  
    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;  
    //检测浏览器是否是足够酷  
    //识别range input.  
    var o=document.createElement('input');  
    o.type='range';  
    if(o.type==='text')alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');   
 
    //设置初始值  
    //无论是否本地存储了，都设置值为5  
    range.value=cachedRangeValue;  
    result.value=cachedRangeValue;  
    //当用户选择了个值，更新本地存储  
    range.addEventListener("mouseup",function(){  
  alert("你选择的值是："+range.value+".我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");  
  localStorage?(localStorage.rangeValue=range.value):alert("数据保存到了数据库或是其他什么地方。");  
    },false);  
    //滑动时显示选择的值  
    range.addEventListener("change",function(){  
          result.value=range.value;  
    },false);  
})();