jQuery toggle() 用在 ‹tr›上，IE8有名的bug!!

專案新Phase最近上線了!!然而在號稱跨瀏覽器支援的jQuery，卻也有碰上死穴的時候!!

在本次專案UI設計裡，因‹table›資料裡有視情況在click時‹tr›做顯示/隱藏的效果。若以javascript撰寫‹tr›做style.display的block/none時，Firefox在資料呈現上卻無法像IE一樣做到滿區塊(width=100%)呈現，因此採用jQuery toggle()方法來做。

實作上也順利將效果展現。然而此時卻傳出IE8沒反應?!怎麼會這樣?!剛開始檢查了jQuery語法，也沒發現錯誤，之後Google一下才發現為jQuery 1.3.2 的bug(我是用jquery-latest.pack.js版本)---在‹tr›選取器上做toggle()就沒反應。

我的解法是:
維持原jQuery寫法，針對‹tr›顯示/隱藏的效果另以javascript寫一支js，只給IE8使用，語法如下:

‹!--[if IE 8]›‹script type="text/javascript" src="js/minisite-effect1016.js"›‹/script›‹![endif]--›

IE8的問題也就解決摟，並且不會動到目前的HTML及開發程式碼!!

談jQuery thickbox 與 Prototype library相衝突的解決方法

應該要算是很高興才對吧!!因為這次專案的UI實作真正遭遇兩大UI Library(jQuery v.s Prototype)共處在一起時對於$ 這個變數定義的衝突的問題與因應之道的寶貴經驗!!

由於頁面上在User互動性設計的考量下，兩年前PG就自行Plugin Prototype framework。而最近普遍使用到的thickbox效果，在"效果的完整性"、"跨瀏覽器相容"及"User接受度"三大考量之下，首推jQuery的thickbox Library最完整。正如"jQuery in Action"書上所言，這兩大UI Framework遭遇了"$"使用衝突的混淆問題，造成某一效果無法正常work。

正如書上所提，可以透過下列三種方式解決:
1. jQuery.noConflict();-->可將$名稱控制權歸還給Prototype。在此宣告之後，必須使用jQuery名稱來呼叫jQuery的特性。

2.用(function($){
//jQuery 程式碼區塊
})(jQuery);

3.宣告一變數值為jQuery的變數，之後使用該變數取代$的使用。

最佳的方法是第一種方式，在宣告jQuery.noConflict();之後，將thickbox.js裡面的$都取代成jQuery。
特別注意的是要逐一找出、取代，不要"全部取代"。因為thickbox.js裡有javascript的$符號，這種可不能取代，否則無法正常work!!

第二種方法最為快速，但風險相對較大。因為在包覆的jQuery 程式碼區塊裡，若有非jQuery使用的$，也會被取代，造成無法正常work!!

第三種全域變數的宣告，可能也會影響到Prototype，造成無法正常運作!!

補充說明:
1.切記務必將jquery的js檔案放在prototype的js檔案前面(瀏覽器先讀jquery的js檔案再讀prototype的js檔案)。
2.在jquery.js後面緊接著宣告避免掉 $() 衝突的問題。如下面例子：
‹script type="text/javascript" src="http://www.fetnet.net/estore/minisite/js/jquery-latest.pack.js›‹/script›
‹script›jQuery.noConflict();‹/script›

‹table›的隱藏/顯示效果在Firefox上的問題

這段期間製作的Prototype發現，我們習慣透過javascript撰寫網頁內容動態顯示/隱藏(display為none或block)效果。

然而若將此效果設定在‹table›上，在變換效果之後，FireFox會以table欄位裡資料(圖或文)實際多寡來呈現table的大小，也就是說若table裡資料很少，在一次切換效果之後，table會突然變小造成跑版。然而這問題在IE上卻不是問題!!

解決的方式為可在‹table›外包一層‹div›，將動態顯示/隱藏的效果從table身上改到div上，如此一來Firefox的跑版問題就解決摟!!

UI Prototype csshover.htc實作心得

目前網站的頻道選單，除了主選單之外還有第二層子選單動態展現，你可以用Flash來表現，但有維護上的issue，而目前主流的做法，可以使用CSS來表現。

然而，若客戶要求跨瀏覽器支援IE6的話， ‹li›tag在CSS hover的設定上卻不被支援。這個時候可以使用html component檔 -- csshover.htc來補強。(詳細資料google就可了解)。

這次專案的製作需求，客戶要求選單+子選單要動態呈現，因此有機會實作這個效果。然而在webserver的解譯執行上，IIS及TOMCAT都能順利呈現所需效果，然而在WEBLOGICAL上卻無反應，雖然有正確設定htc檔連結路徑卻仍無反應。

這是因為WEBLOGICAL需要在web.xml增加下列宣告:
‹mime-mapping›
‹extension›
htc
‹/extension›
‹mime-type›
text/x-component
‹/mime-type›
‹/mime-mapping›

如此即可順利在IE6上正常顯示!!
參考網頁:
http://www.xs4all.nl/~peterned/csshover.html
http://www.hoeben.net/node/33

用JavaScript Graphics Library及CSS也能繪製純html的圓餅圖

一般頁面在呈現圖表時，多半以繪圖軟體繪製成圖檔，再利用img標籤連結。這樣子固定的圖形無法符合動態資料的需求配合改變。近日發現一套 JavaScript Graphics Library 利用 High Performance JavaScript Vector Graphics Library 進行圖形繪製，特色是每一像素線條均以 div 標籤動態繪製出來的。Bar Graph、Pie Chart、Line Chart、Multiple Line Chart 等函式庫可繪製產生各種直線、曲線、圓、橢圓、多邊形、方形等等。若頁面上所需呈現的圖形不複雜，這個函式庫蠻好用的。

我試寫了表單輸入欄位，以四個文字輸入欄位接受user的數字輸入，在按下"送出"按鈕後立即產出圓餅圖。配合撰寫的javascript如下圖，頁面參考如附圖!!

Javascript跨視窗操作最佳解

今天在準備給客戶的線上購物情境流程頁面裡，最後完成購物(C頁面)前的資料填寫頁面(A頁面)上，在按下送出按鈕後，需要另開一固定大小的POPWindow(B頁面)，在B頁面完成某些資料填寫後，按下送出按鈕，隨即關閉B頁面，並在原A頁面載入完成購物頁面(C頁面)。

上述的頁面流程，需要在A頁面及B頁面的送出按鈕加入javascript code，如下:
資料填寫頁面(A頁面)送出按鈕:
‹a href="####" onClick="window.open(C頁面.html', 'pay', config='height=515,width=460,top=30,left=30,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');window.name='payment';"›

POPWindow(B頁面)送出按鈕:
‹a href="C頁面.htm" target="payment" onclick="javascript:window.close()"›

說明:
1.(A頁面)送出按鈕在點選後另開一視窗，並同時透過window物件設定目前視窗名稱為payment。
2.(B頁面)送出按鈕在點選後，於名為payment的視窗(也就是原A頁面)載入C頁面，同時將視窗關閉。

簡易Lottery電腦隨機號碼產生

最近透過JQuery的實作機會將Javascript、及Ajax再做一次精讀與演練。年關將近，滿腦子金銀財寶幻想的我心想眼前的NB會不會為我帶來財富，或許把NB拿到廟裡過個香爐拜拜，或許能傳達財神爺的幸運號碼。

哈哈，心裡一想的同時，花了幾分鐘用javascript+JQuery把幾行指令寫下，完成電腦隨機跑出六組各六個號碼，或許可以參考看看今晚買張樂透彩試試看摟!!

本支程式用到JQuery的js檔案，記得要到JQuery官網下載，程式碼如下:
1.在‹head›‹/head›之間加上下列code


2.在‹body›‹/body›之間加上下列code


頁面上就自動跑出六組號碼介於1~49，每組各六個號碼!!UI的呈現沒有多加著墨，只做簡略的CSS定義。

簡潔有效的jQuery "ThickBox" effect

最近一直在尋找popwindow的新花樣，之前也知道jQuery "thickbox"特效。特別利用這個週末來個實作，享受jQuery的小巧強悍特性。

想一想要分享的都在下面兩網站裡，內容潛顯易懂，請自行參考。第二個網站在範例code裡有把原創網站所沒有點出的重點寫出來，還不錯!!

參考網站:
http://jquery.com/demo/thickbox/
http://www.hsiu28.net/html/jss.php?id=19

Dreamweaver的Spry framework效能使用心得

最近專案客戶的新需求是在網站Header裡增加收合式Menu Bar的功能，第一個想到的是Adobe Dreamweaver所提供方便快速的Spry Framework。輕鬆幾個步驟自動產生基本功能的陽春Layout，接著在視覺美化上則透過熟悉的CSS語法配合新設計的圖檔加以重新定義成所需要的UI。在這一切都實作完成並進入測試時，卻發現美中不足的是----效能問題。

因為客戶網站為一電子商務網站，功能齊全。在複雜的企業規則與商業邏輯的程式運作上，再加上背後介接了數個系統，網站整體效能已經有點令人擔心。在此次Spry Framework的應用上，視覺效果的呈現明顯Lag。探究其原因主要在於客戶網站所套用的CSS檔案過多所造成。Spry Menu Bar是透過Spry Framework 的一支javascript檔去動態呼叫特定的CSS檔案產生效果並做支援跨browser的判斷處理，若實務應用在過於複雜、需要套用多支CSS檔案的網站，建議在實作前先進行簡單測試，評估是否在達成所需的視覺效果的同時有明顯的效能問題。

效能問題發生後，請教了幾位PG共同商議解決之道。最後是為求不更動現狀的考量下，放棄Spry Framework，而重新寫了一支純CSS的Menu Bar功能，並且符合客戶在支援跨4種Browser版本的要求。背後套用了Peter Nederlof所發表的一支behavior file，主要在解決IE6不支援清單 ‹li›‹/li›hover效果。而對於Absolute Position的 ‹div›碰上‹select›‹/select›element及Flash檔案所造成Layer被覆蓋的問題又另一解決方案issue。 有關Absolute Position的碰上‹select›‹/select›element及Flash檔案所造成Layer被覆蓋的問題，可以技巧性地透過‹iframe›‹/iframe›克服。Absolute Position的 ‹div›可覆蓋‹iframe›‹/iframe›，而‹iframe›‹/iframe›可覆蓋(或包覆住‹select›‹/select›element及Flash檔案，提供大家參考。