2010年8月10日

在頁面上的某區塊使用捲軸(scroll bar)

在頁面上,有時某區塊需容納大量資料,導致這個區塊需要使用捲軸(scroll bar)來呈現資料。使用css控制就會是:

width:500px;
height:500px;
overflow:auto;

有時只想要在直向或橫向家上捲軸,就要改用overflow-x和overflow-y來告訴瀏覽器,兩個方向的處理方式。比如只想直向有捲軸:

width:500px;
height:500px;
overflow-x:hidden;
overflow-y:scroll;

本來預期該寫overflow-y:auto讓瀏覽器根據內容長度決定是否需要產生scroll bar,實作此法後卻發現IE7捲軸不會出現,IE6和IE8則和預期一樣,改成overflow-y:scroll就通通都有scroll bar了。

至於加上scroll bar之後,會外加在內容右側還是會附蓋到內容的右側呢?那又是個需要好好實驗的課題了。

2010年8月8日

HTML/CSS 固定表格td寬度

在HTML裡使用Table排列表格時,常常會碰到就算CSS設定好td的寬度,td的實際寬度會隨內容自動調整。今天在排類似報表的表格時候碰到類似問題,經過google發現解法:

http://www.tek-tips.com/faqs.cfm?fid=4499

在table的style加入table-layout:fixed即可顧定寬度。

該篇文章是很多年前的,不過今天經過測試,此法在Firefox3.6.8、IE6、IE7、IE8上都可以順利排版。

2009年11月30日

檔案上傳應用程式

專案中有檔案上傳的需求,使用Actionscript的檔案相關Class。介面和現有網站能夠風格相符,並可在外部傳入參數以控制上傳檔案格式、檔案大小、單次上傳檔案個數等參數。根據需求決定以flashvars方式傳入參數,並以以Flex開發。

以下是使用介面。為了和網站其他部分統一,使用客製化Button Skin。
呼叫上傳功能後出現的應用程式對話框,swf檔位在兩條橫線間。

上傳應用程式

可選擇數個檔案,這些檔案可在本機的不同資料夾中。

上傳應用程式

上傳期間會有進度條,上傳完畢會出現Alert視窗告訴使用者上傳結束。

上傳應用程式

按上圖Alert視窗的確定鈕後,會重新計算可上傳空間,並讓使用者繼續選檔案上傳。或者在任何步驟中按左下角Exit紐(此為HTML按鈕)會結束此對話框。

上傳應用程式