2011年3月22日 星期二

jQuery_X與Y的廣告輪播+圖片拖曳完成系統說明頁面

約莫三個多月前就在想系統說明頁該怎麼呈現,到前一陣子才有一個大概的雛型,

最近結案時間越來越近,人力卻被抽的越來越少,導致時間卡的越來越緊,

但是又不想把這雛型放棄不做,轉而讓使用者下載操作手冊,所以昨天決定一股作氣把他完成,

從:photoshop圖片繪製→HTML、CSS編排→jquery撰寫→教學內容撰寫→說明圖片擷取→配色→到最後突然才想要加上的圖片錨點功能,

歷經兩天,約略27.532小時的工作時數,終於完成了。

功能面是以一般廣告輪播的方式組合而成,也就是X方向一個移動動畫,Y方向一個動畫,

最後配合圖片拖曳的方式,製作圖片錨點的功能。

直接看結果:


老王賣瓜,自認為讚。

通過A+檢測了。

大家都一下就通過了,我搞好久才通過!

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鍵操作)

2011年3月12日 星期六

暮光堡壘-丘加利

倒了!賀!

成員:++、kaka、熊、阿龍、飛魚、辰藍、柚子、真影、洛琪、我! ㄎㄎ

魔獸啟示錄

a. 夾頭四人幫:遊戲一個人玩不錯,與朋友一起玩更讚,工作亦然。能夠個人成長固然重要,但團隊合作才是我們坐在同一區塊共事的最大誘惑,而合作的第一步是實際地、盡力地幫忙。


b. 奧妮克悉亞前:團隊信任來自於別人的能力,信任的累積來自於一次次的合作,足夠的信任與了解,才能蓄積更大的能量。當每個人心中,默默的希望為什麼王不能一個人打就好?為什麼案子不能一個人做就好?就表示現在的模式失敗了。


c. 狼與鼠:狼人怕老鼠?笑話,但是再卑微的人(員工)都值得了解。


d. 聚鼠成死:微小的力量,聚起來也是洪水猛獸。


e. 箱後觀景:處處都有觀察者,微小的改變就可以觸動人心。有一個機緣讓自己思考了,想到了應該改變的方向,說出了改革的話語,自然會有人觀察您做出的改變,而失望往往來自於一次次的謊言。


f. 狼與羊:每個人底限不同,何必天天試探界線?盡力、狼與羊也可以共處。人生、工作上的期限,能力內的趕快完成,可以獲得更多的滿足。


g. 領航者:選擇拿著韁繩,就必須扛下相對的責任。而責任不光是馬車上的貨物,更多的是馬車上的人們。您可以不視這些人為夥伴,但您不可以忽視所作所為對於車上人的影響。


h. 翻車自省:酒駕的人在路邊後悔,對方家屬說:『還好人還安全,請你改掉這不好的習慣』,當下『好』,三個月後他又酒駕了。員工離職的老闆在辦公椅上思考,離職者說:『有很多東西可以改。』,老闆說:『好』,半年後又有人一樣的原因離職了。說很容易,事情有些難有些簡單,連簡單的都不做,就是沒誠意;一值用'謊言'的人更沒誠意。


i. 鎂光燈:眾所注目很好,但低調也很好。


j. 危險不自知:話語會讓人身處危險,實話要講不講在於自己,但當大家都不講,就只能停在原地。好吧~~危險很近。


k. 靈活胖子:看見別人胖,沒看見別人靈活,優缺都該看。


l. 救救那些人:能力範圍內,讓身處的環境變好是件善事。

2011年3月11日 星期五

asp.net_Menu控制項若要過無障礙A+請先測試再使用

手頭上的案子需要通過無障礙(A+等級)檢測,前天突然覺得檢測的時機到了,

跟同事要了FreeGo 3.1.1版,點擊兩下,輸入網址,按下開始....

第一次跑完,總計5000+個錯誤,先將一些alt標記上去後,還有3894個錯誤。

3894?什麼東西可以有3894個錯誤.....

看似很恐怖,仔細一看全部的原因都在一項,

「H209002 確保事件的啟發不要求一定得使用滑鼠」,這是什麼意思?

其實就是除了滑鼠以外要可以用鍵盤操作,他判斷的標準是:

1. 輸出的HTML內有onmousedown,就必須有onkeydown

2. 輸出的HTML內有onmouseup,就必須有onkeyup

3. 輸出的HTML內有onclick,就必須有onkeypress

3. 輸出的HTML內有onmouseover,就必須有onfocus

3. 輸出的HTML內有onmouseout,就必須有onblur

瞭解他的原因以後....真是對3894個錯誤完全沒有頭緒。

-------------------------------------------

找了一下資料發現,因為我的menu選單使用asp.net內建的menu控制項,

而Menu控制項在輸出到HTML時,會產生onmouseover、onmouseout、onkeyup三個事件,

所以必須要加入對應的三個事件才可以通過程式的檢測。

所以我當時的想法是:

1. 一定可以加入這些很一般的事情。

2. 如果不可以,我就用jquery把他加上去。

事實證明,我失敗了 XD

首先,第一個想法:

A. Menu控制項若用Attributes.add("onfocus","")的方式加入事件,只能加到最外層,也就是Menu自己,下面的子層不會改變。

B. 若是使用樣版的方式,雖然可以把類似menulist使用label等控制項取代掉,但去觀察產出的HTML,onmouseover等事件其實是加在tr裡面,所以即便在樣版的label上加了onfocus等事件,還是無用。

接下來,第二個想法:

A. jquery等javascript皆可以正確的將onfocus事件加上去,但是HTML一開始輸出後,即便利用JS動態的加上這些事件,操作起來也都有效果,但輸出的HTML並不會隨之改變,也就是說那些動態的東西,監測程式也無法監測到,所以無效。

所以本篇只有一個重點,就是你要過無障礙A+,而你有用ASPNET的Menu,經過我兩天的測試,我認為無法通過,所以後來只好選擇用jquery手工打造Menu了。(也可能可以,但是我沒找到方法)