2011年3月14日 星期一

jQuery_仿ASP.NET-Menu控制項的選單

上星期五承認ASP.NET-Menu控制項通過不了無障礙A+的事實以後,決定用jQuery來寫一個。

需求是:

1. 通過無障礙A+機器檢測。

2. 仿ASP.NET選單多階層式選單。

3. 依不同權限顯示不同表單(目前分登入與未登入兩種)。

4. 按tab鈕可以檢索完成整個選單。

---------------------------------------------------------------
作法:

1. 有一個很奇妙的問題是,雖然ASP.NET的選單沒辦法通過無障礙的檢測,但其實他可以使用滑鼠及鍵盤操作,卻因為事件過不了,而用JavaScript方式做出的選單卻一定會通過。原因是什麼?說到底,如果用JS做出的選單在HTML上面並不會出現類似onMouseover等事件,甚至可以說他就是一個單純的div、lu、li、a標簽,對於一個只有這些標籤的網頁,不通過機器檢測也很難。所以第一項可以略過不看,先用JS做出選單後,再補足鍵盤操作即可。

2. 接下來進到重點,利用jQuery來製作一個仿ASP.NET的選單。

A. 定出要放選單的位置(參考)

B. 建構選單的HTML架構:
首先,以一個選單div(紅框)包住母選單之ulli(綠框),再在選單DIV內加入子選單div(紫框)與子選單ulli(藍框),看下圖應該可以很清楚架構。

C. 整理HTML:依上面的架構,會有一個母選單,與多個子選單,只需要接續建置出來就可以了。建置各項子母選單連接時,取的ID名稱是另一個重點;以下圖來說,內容包含建立的母選單與第一個子選單區塊,可以觀察母選單中,第一個有子選單的項目是『測繪成果資料供應』這個項目,而他超連接的內容是『#divList5』,必須與第一個子選單div的id相同。原因是這樣在任何事件取得該a標籤時,就可以抓到對應的子選單名稱。


D. 程式碼流程:
甲. 利用CSS將所有的子選單以隱藏方式呈現。
乙. 當滑鼠移到任何母選單項目時確認子選單都消失。
丙. 若在href屬性抓取到相對應的ID,讓相對應的子選單出現。
丁. 當滑鼠移出整個區塊選單時,確認子選單都消失。

主要程式碼如下:

F. 美觀:當然如果有人可以或是自己就可以,你可以對選單做很多的美化工作,或是用個不錯的動畫效果。

3. 下一個重點,通常選單會隨著權限來做變化,這邊我的想法很簡單,因為應該有權限的頁面都已經用ASP.NET的機制鎖在登入頁之後,所以即便我的CSS與JS在瀏覽器上失效,使用者看到不應該出現的項目,點選後也無法進入;所以這邊我的作法就是單純的把他隱藏起來,判斷帳號角色屬於可見的權限時,才將其顯示。而一次全顯示與全隱藏抓取的方法是藉由css方式。以下圖來說,就是在要登入才顯示的選項加上hideMenuRole的CSS。

4. 完成了滑鼠控制以後,必須要加上鍵盤控制才能說是基本的無障礙,所以加上focus與blur事件,讓滑鼠移上與移下所產生的效過,都可以藉由focus執行。另一個重點是按tab鍵必須要依序巡覽整個選單,所以在母選單都加上tabindex屬性,並且在子選單也加上相對應的tabindex。比如說tabindex=2的母項上有子選單,則在子選單上面都加上tabindex=2之屬性,依此類推。

最後檢視一下在各個瀏覽器上的執行情況(以下為ie6、ie8、chrome10.0.648.127及firefox3.6.13):

執行影片(滑鼠操作→登入後選單改變→利用鍵盤TAB鍵操作)

沒有留言:

張貼留言