用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檔案，提供大家參考。

jQuery筆記(1)--append()

append()方法是將字串資料、元素或物件依附在選定的wrapped set，範例:
$("#block").append("Hello!!");
上述作用為將字串Hello!!放在id為block的元素內容後面。

$("#block").append($("a.Hlink"));
上述作用為將具有類別名稱為Hlink的‹a›‹/a›資料(tag及文字所有內容)放在id為block的元素內容後面。

重點:當目的地(#block)有多個的時候，append source的元素將停留原地，並以複本附加於各目的地元素內容後。若目的地(#block)只有一個時，append source的元素將直接移動至目的地元素內容後。

appendTo(target):將選定的wrapped set依附在指定的targer(字串或元素)內容後。
$("‹p›test‹/p›").appendTo("#block p");
上述作用為將‹p›test‹/p›內容上在id為block元素裡p元素內容後面。

$("#flower").appendTo("#block p");
上述作用為將id為flower的元素內容，放在id為block元素裡p元素內容後面。
重點:目的地的多個或單個，決定source是移動或複製。

prepend(),prependTo(),insertAfter(),after(),insertBefore(),before()運作方式類似!!

實用的「專案管理之工具應用」課程

9月26日(六)上完台大嚴慶齡工業研究中心所開辦的「專案管理之工具應用」課程。在專注於各種專案管理工具學習操作與演練的同時，個人有下列心得:

1. 專案的成果是需要一個團隊合作來完成。面對Project的每個issue，每個人都有各自的Solution想法。在集眾人之智、討論、整合意見達成共識的目的下，"工具"的應用就扮演具體而實質的功效。簡單而言，工具除了幫助尋求問題的解答之外，也是協助團隊進行"溝通"的好方法!!
2. 了解各個專案管理工具的功能，並在特定的目的下善加利用。例如Decision Tree主要的功能在於透過評估或蒐集所得事件發生機率、收益與成本等數據資料並計算所得，藉以在多種方案下進行最佳選擇，這就是Decision Tree的決策功能。但你無法要求它提供過程中其它因素的影響分析。
3. 在使用"工具"之前，對於數據資料的蒐集是非常重要的。網路發達的環境，對於資訊的取得通常以"google一下"的方式。然而往往忽略了PMBOK裡最基本的重點---依據"組織過程資產"與"專家判斷"工具。雖說"組織過程資產"端視服務的公司是否有從事知識管理，建立PMIS之類豐富的專案Lessons Learned。但從事專案管理的過程中，要時時把握住PMI所強調的核心理念。
4. 箭線圖(ADM)結合Time Flow，強調置高點的宏觀檢視。記得當時在上PMBOK的時程管理，對於ADM通常只Focus在結點、箭線、虛箭線的圖示含意與任務關聯，然而這次課堂上，將ADM結合時間對照的觀念，強調Diagram、任務期間長度與時間軸三者相呼應的要求，如此透過ADM能宏觀整個專案任務在依存關係與時程展現上更加明確具體。

最後很高興後兩堂課所講授的品質管理其中6個管理工具，老師要我們使用海報、便利貼、繪圖筆等傳統工具來完成6個Diagram。透過小組brainstorm、溝通、整合後，按照講義的step by step要求一步一步扎實進行，實作成牆壁上的六大張海報圖，讓工具的應用與操作更加深刻。