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);  
})();