|
頁(yè)簽的流行
自從Yahoo!的首頁(yè)引進(jìn)頁(yè)簽（tab, 見(jiàn)下圖）之后，這種可用性極佳的方式越來(lái)越受歡迎，用戶也逐步習(xí)慣和喜歡上它，因?yàn)樗梢栽谠械目臻g上增加更多的可用信息，而且只需切換，不需刷新整個(gè)頁(yè)面，瀏覽更舒暢。很多網(wǎng)站接受并使用，如新浪等。
頁(yè)簽的標(biāo)記結(jié)構(gòu)
那么，讓我們來(lái)看看這些頁(yè)簽后的代碼。
新浪完全不考慮什么標(biāo)準(zhǔn)，就是表格嵌套，我們略過(guò)不提。Yahoo!的XHTML形式是這樣的：
<div>
<ul>
<li>頁(yè)簽1</li>
<li>頁(yè)簽2</li>
...
</ul>
</div>
<div>
<div>內(nèi)容1</div><!--它們可能由Ajax載入-->
<div>內(nèi)容1</div>
...
</div>
...
符合標(biāo)準(zhǔn)，但卻沒(méi)有語(yǔ)義。頁(yè)簽和相應(yīng)內(nèi)容沒(méi)有任何關(guān)聯(lián)。也就是說(shuō)，在沒(méi)有CSS展現(xiàn)的情況下，用戶并不曉得頁(yè)簽究竟對(duì)應(yīng)哪一塊內(nèi)容。而且就JavaScript實(shí)現(xiàn)來(lái)說(shuō)，必須對(duì)元素定義更多的id或者class作為調(diào)用鉤子（hook），容易造成代碼冗余。有人對(duì)此作出改良，使用連接元素的hash（即#號(hào)后的字段）跟內(nèi)容進(jìn)行關(guān)聯(lián)，即下面這種形式：
<div>
<ul>
<li><a href="#content1">頁(yè)簽1</a></li>
<li><a href="#content2">頁(yè)簽2</a></li>
...
</ul>
</div>
<div>
<div id="content1">內(nèi)容1</div><!--它們可能由Ajax載入-->
<div id="content2">內(nèi)容1</div>
...
</div>
...
這種方式對(duì)于機(jī)器來(lái)說(shuō)，確實(shí)找到了關(guān)聯(lián)點(diǎn)，而且用戶點(diǎn)擊的時(shí)候，也能在hash的作用下（傳統(tǒng)說(shuō)法中的“錨點(diǎn)”）調(diào)到相應(yīng)的內(nèi)容區(qū)塊。有進(jìn)步，但還是不夠語(yǔ)義。
語(yǔ)義，語(yǔ)義，語(yǔ)義！
理想中標(biāo)準(zhǔn)的、語(yǔ)義的tab代碼應(yīng)該是怎么樣的呢？在我看來(lái)，應(yīng)該是這樣：
<dl>
<dt>頁(yè)簽1</dt>
<dd>內(nèi)容1</dd>
<dt>頁(yè)簽2</dd>
<dd>內(nèi)容2</dd>
</dl>
當(dāng)然，我認(rèn)為并不是Yahoo!的設(shè)計(jì)師／開(kāi)發(fā)者并不了解語(yǔ)義，可能是由于某些特殊的需求在這種代碼下可能會(huì)實(shí)現(xiàn)不了，只好采取折衷方案。是的，在這種代碼形式下，語(yǔ)義雖能充分體現(xiàn)，但是要實(shí)現(xiàn)頁(yè)簽的表現(xiàn)形式，確實(shí)是一個(gè)難題。
出處：Realazy
責(zé)任編輯：moby
上一頁(yè) 下一頁(yè) 標(biāo)準(zhǔn)的 語(yǔ)義的 非侵入的頁(yè)簽切換 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 標(biāo)準(zhǔn)的 語(yǔ)義的 非侵入的頁(yè)簽切換 [1]
第 2 頁(yè) 
