基于Web標(biāo)準(zhǔn)的UI組件 — 樹狀菜單(2)

UI Components Based on Web Standards - TreeView (2)

　　從這篇開始，你需要擁有一些Javascript和DOM相關(guān)的知識(shí)才能順利地學(xué)習(xí)下去。由于Javascript和DOM都不是三言兩語可以說完的東西，如果你對(duì)它們還不熟悉，請(qǐng)先到這里學(xué)習(xí)一下再繼續(xù)：Javascript在線教程（英文）、DOM在線教程（英文）。

getElementsByClassName()

　　為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個(gè))，我們先來實(shí)現(xiàn)一個(gè)通過className找DOM節(jié)點(diǎn)的方法：getElementsByClassName。這是對(duì)瀏覽器自有DOM方法的一個(gè)簡單但實(shí)用的擴(kuò)充。

　　此方法有兩個(gè)參數(shù)：ele指出以哪個(gè)DOM節(jié)點(diǎn)為根節(jié)點(diǎn)尋找（也就是說只找ele的子節(jié)點(diǎn)），className指出符合條件的節(jié)點(diǎn)的class屬性中必須包含怎樣的className。它的返回值是一個(gè)數(shù)組，存放了所有符合條件的節(jié)點(diǎn)。

function getElementsByClassName(ele,className) {//獲取所有子節(jié)點(diǎn)if(document.all){var children = ele.all;}else{var children = ele.getElementsByTagName(‘*‘);}//遍歷子節(jié)點(diǎn)并檢查className屬性var elements = new Array();for (var i = 0; i < children.length; i++) {var child = children[i];var classNames = child.className.split(‘ ‘);for (var j = 0; j < classNames.length; j++) {if (classNames[j] == className) {elements[elements.length] = child;break;}}}return elements;}

　　最前面的一個(gè)if-else語是為了兼容IE5（IE5不能運(yùn)行document.getElementsByTagName(‘*‘)）。需要注意的是千萬不要用瀏覽器檢測的方法來寫腳本，而應(yīng)該直接使用將要用到的語句來測試是否可以執(zhí)行，如果返回值為null或undefined，那再換一種方法。這樣的腳本可以有更好的兼容性，也更健壯。

　　elements[elements.length] = child;，這句同樣是為了兼容IE5才沒有使用數(shù)組的push方法。如果你一定要使用push方法，那么可以在執(zhí)行getElementsByClassName()之前先重載一遍push方法。代碼如下：

Array.prototype.push = function(value){this[this.length] = value;}

　　注：原本我希望getElementsByClassName也能像push方法一樣寫，比如HTMLElement.prototype.getElementsByClassName = ...。不過實(shí)際操作的時(shí)候發(fā)現(xiàn)在運(yùn)行時(shí)HTMLElement這個(gè)對(duì)象并不是固定的，每種tag似乎都不一樣，只能作罷。如果你有解決方案請(qǐng)告訴我，謝謝。

　　現(xiàn)在我們就可以方便地找出頁面上所有的樹狀菜單了：

var trees	= getElementsByClassName(document,‘TreeView‘);for(var i=0;i<trees.length;i++){alert(‘我是第‘ + i + ‘個(gè)樹狀菜單‘);//在這里可以更細(xì)致地處理每一個(gè)樹狀菜單}

　　最后把上面這幾句加到window.onload事件中運(yùn)行，以便文檔一加載完就對(duì)樹狀菜單進(jìn)行初始化。完整的代碼請(qǐng)查看下面例子的源代碼。

　　查看效果（例1）

區(qū)分樹枝與樹葉

　　在上一篇中我們說到樹枝和樹葉的區(qū)別就是這個(gè)節(jié)點(diǎn)有沒有子節(jié)點(diǎn)，所以判斷樹枝和樹葉的方法也可以從這個(gè)角度來考慮。一個(gè)比較直觀的方法就是遍歷整個(gè)樹狀菜單的DOM樹（注意這里兩個(gè)“樹”的區(qū)別），看看每個(gè)節(jié)點(diǎn)是不是擁有子節(jié)點(diǎn)，如果有的話我們就給這個(gè)節(jié)點(diǎn)一個(gè)專門的class以示區(qū)分。我們這里用一種比較取巧的方法，就是判斷各個(gè)節(jié)點(diǎn)的innerHTML中有沒有出現(xiàn)字符串‘<ul>‘。如果有的話，那么很顯然它擁有一個(gè)或多個(gè)子節(jié)點(diǎn)。

var trees	= getElementsByClassName(document,‘TreeView‘);for(var i=0;i<trees.length;i++){//先把所有的節(jié)點(diǎn)找出來var nodes = trees[i].getElementsByTagName(‘LI‘);//判斷各個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)for(var j=0;j<nodes.length;j++){if(nodes[j].innerHTML.toLowerCase().indexOf(‘<ul>‘) > -1)nodes[j].className += ‘Open‘;}}

　　這里給每個(gè)樹枝加了一個(gè)className：Open，因?yàn)槲覀儸F(xiàn)在還不能打開關(guān)閉樹枝，所以只要是樹枝那就是open的。當(dāng)然后面我們會(huì)用到Close的：）。相應(yīng)的修改一下CSS，給樹枝一個(gè)帶減號(hào)的圖標(biāo)，表示它是打開的：

.TreeView li.Open{background:transparent url(opened.gif) 12px 2px no-repeat;}

　　查看效果（例2）

高亮選中項(xiàng)

　　接下來實(shí)現(xiàn)把當(dāng)前選中的樹枝（或樹葉）高亮的功能。有兩個(gè)時(shí)候需要高亮：菜單初始化的時(shí)候和點(diǎn)擊某個(gè)菜單項(xiàng)的時(shí)候。

　　初始化的時(shí)候比較容易處理，直接給需要高亮的節(jié)點(diǎn)一個(gè)特殊的Class即可，比如“Selected”：

.TreeView li.Selected a:link,.TreeView li.Selected a:visited,.TreeView li.Selected a:hover,.TreeView li.Selected a:active{background-color:#05F;color:#FFF;text-decoration:none;/*去除下劃線*/cursor:default;/*讓光標(biāo)變?yōu)槠胀^，假裝是不能點(diǎn)的^_^*/padding:0 2px;/*為了美觀考慮，也可以不要這句*/}

　　查看效果（例3）

　　這里有幾點(diǎn)可能還需要補(bǔ)充說明一下：

1. 選擇器（Selector）的前面為什么要加上.TreeView，這不是冗余代碼嗎？
   在這個(gè)例子中確實(shí)是冗余代碼，但在實(shí)際項(xiàng)目中，一個(gè)頁面上可能會(huì)有各種不同的組件，比如還有一個(gè)菜單，被選中的菜單項(xiàng)也用.Selected來表示。這時(shí)就需要在選擇符的前面先指出是什么組件的選中項(xiàng)以防沖突。當(dāng)然還有其他的解決辦法，比如這里的類不取名為Selectd，改為TreeSelected或者其他什么的，但是這樣做人為的把命名方案復(fù)雜化了，我個(gè)人不推薦這樣做。
2. 選擇器為什么分作四行來寫？
   因?yàn)槲覀冎耙呀?jīng)設(shè)置過a的樣式，為了提高優(yōu)先級(jí)重載舊的樣式，所以需要指定a的四種偽狀態(tài)（還有其他提高優(yōu)先級(jí)的辦法，關(guān)于優(yōu)先級(jí)算法，在《網(wǎng)站重構(gòu)》一書中有詳細(xì)說明）。
3. Selected為什么要用在li上，而不直接用在a上？
   這又是一個(gè)不太容易說明白的地方，因?yàn)楹艽蟪潭壬纤且环N個(gè)人習(xí)慣，只是我個(gè)人覺得這樣做更合適一些。事實(shí)上，寫在li上或a上都是可以的，至少看上去（表現(xiàn)層的視角）不會(huì)有太大的區(qū)別，但是如果你從“表現(xiàn)層”中跳出來，站在“結(jié)構(gòu)層”的視角來看，無論這個(gè)菜單的樹結(jié)構(gòu)還是DOM結(jié)構(gòu)，一個(gè)節(jié)點(diǎn)都是由一個(gè)li來表達(dá)的，a只不過是這個(gè)節(jié)點(diǎn)內(nèi)的更細(xì)節(jié)的部分。雖然我最終是希望給a指定一個(gè)特殊的樣式（為什么不指定給li？你可以自己試一下），但從XHTML結(jié)構(gòu)來說，這個(gè)class="Selected"還是寫在li上更合適。（上帝保佑我說清楚了……）

下一篇講什么？

　　這篇文章是我第一次加入Javascript內(nèi)容，不是很清楚是說淺了還是說深了，請(qǐng)大家在右邊留言告訴我你的想法。從下一篇開始，我們開始進(jìn)入部署鼠標(biāo)事件和響應(yīng)鼠標(biāo)事件方面的內(nèi)容。也許從下下篇開始再加入一些Javascript面向?qū)ο缶幊痰膬?nèi)容，待定待定……hehe^_^