HTML5學(xué)前熱身 實(shí)用技巧及應(yīng)用詳解

二十六、data屬性(TheDataAttribute)

我們現(xiàn)在可以很正式地讓所有的HTML元素支持自定義屬性。然而，以前，我們可能會(huì)這樣：

<h1idh1id=someIdcustomAttribute=value>小樣，膽兒挺肥的呢</h1> 

校驗(yàn)器會(huì)小題大做!但是現(xiàn)在，只要我們以”data”為前綴定義我們的自定義屬性，盜版屬性立馬變成正牌的了。如果你發(fā)現(xiàn)你曾經(jīng)把一個(gè)重要的數(shù)據(jù)附加在諸如class的屬性上，可能為了JavaScript之用，那么，本屬性將大有幫助。

二十七、Output元素

正如你可能預(yù)料到的，output元素被用來顯示部分計(jì)算，例如，如果你想顯示一個(gè)鼠標(biāo)的位置，或者是一系列數(shù)字的總和坐標(biāo)，這個(gè)數(shù)據(jù)應(yīng)被插入到output元素中。舉個(gè)簡(jiǎn)單的例子，當(dāng)提交按鈕被按下，我們用JavaScript將兩個(gè)數(shù)字相加值插入到空的output中。

<formactionformaction=""method="get"> 
<p>10+5=<outputnameoutputname="sum"></output></p> 
<buttontypebuttontype="submit">計(jì)算</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('你的瀏覽器尚未準(zhǔn)備好！');  
}  
}  
)  
(); 

自己測(cè)試了下，貌似現(xiàn)在只有在Opera瀏覽器下有上佳的效果：

如果您現(xiàn)在使用的是較新版本的Opera瀏覽器，您可以狠狠地點(diǎn)擊這里：HTML 5結(jié)果輸出框demo。此元素也可以接受一個(gè)屬性，它反映了輸出相關(guān)元素的名稱，類似label工作原理。

二十八、使用區(qū)域input創(chuàng)建滑塊

HTML 5引進(jìn)了range類型的input。

<inputtypeinputtype="range"> 

最值得注意的是，它可以接收min,max,step,和value屬性，等等。雖然現(xiàn)在似乎只有Opera瀏覽器充分支持這種輸入類型，但是當(dāng)我們可以實(shí)際使用時(shí)，這將是美妙無比的!

第一步：標(biāo)簽

首先，創(chuàng)建標(biāo)簽

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

第二步：CSS

下面，我們要使用一點(diǎn)點(diǎn)的樣式。我們將使用: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

◆檢測(cè)我們的瀏覽器是否認(rèn)識(shí)rangeinput，如果不，顯示提示。

◆當(dāng)用戶移動(dòng)滑塊的時(shí)候，動(dòng)態(tài)改變output的值。

◆監(jiān)聽，當(dāng)用戶離開滑塊，插入值，同時(shí)本地存儲(chǔ)。

◆然后，下次用戶刷新頁面的時(shí)候，選擇的區(qū)域和值會(huì)自動(dòng)地設(shè)置成他們最后一次選擇。

(function(){  
    var  f=document.forms[0],  
    range=f['range'],  
    result=f['result'],  
    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;  
    //檢測(cè)瀏覽器是否是足夠酷  
    //識(shí)別range input.  
    var o=document.createElement('input');  
    o.type='range';  
    if(o.type==='text')alert('不好意思，你的瀏覽器還不夠酷，試試最新的Opera瀏覽器吧。');   
 
    //設(shè)置初始值  
    //無論是否本地存儲(chǔ)了，都設(shè)置值為5  
    range.value=cachedRangeValue;  
    result.value=cachedRangeValue;  
    //當(dāng)用戶選擇了個(gè)值，更新本地存儲(chǔ)  
    range.addEventListener("mouseup",function(){  
  alert("你選擇的值是："+range.value+".我現(xiàn)在正在用本地存儲(chǔ)保存此值。在現(xiàn)代瀏覽器上刷新并檢測(cè)。");  
  localStorage?(localStorage.rangeValue=range.value):alert("數(shù)據(jù)保存到了數(shù)據(jù)庫或是其他什么地方。");  
    },false);  
    //滑動(dòng)時(shí)顯示選擇的值  
    range.addEventListener("change",function(){  
          result.value=range.value;  
    },false);  
})();