The Will Will Web

最近用了一個很簡易的繪製圖表(Chart)的工具，完全是以 DHTML / CSS 完成所有圖表繪製工作，是個完全 Client-side 的套件，而且支援 Gecko-Browsers, IE 4, 5, 6, 7, 8, Opera 5, 6 and 7+ 等各式瀏覽器，如果你的圖表並不複雜，建議可以考慮用這套進行圖表繪製，可以省去你不少時間。

這一套 DHTML Library 主要是利用 High Performance JavaScript Vector Graphics Library 進行圖形繪製，所有圖素都是利用一大堆 div 標籤動態繪製出來的，可產生各種直線、曲線、圓、橢圓、多邊形、方形等等，然後再利用另一個人寫的 Bar Graph、Pie Chart、Line Chart、Multiple Line Chart 等函式庫繪製出各種圖表。

我以 Pie Chart 為例，繪製的方法有以下 3 個步驟：

1. 載入 JavaScript 函式庫

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="pie.js"></script>

2. 宣告一個畫布(Canvas) 繪圖製表用，假設畫布的大小為 寬 400px 高 400px，還有 id 為 canvas_name

<div id="canvas_name"
     style="position: relative; width: 400px; height: 400px; overflow: auto"></div>

3. 接著將 Pie Chart 的每一個項目都新增(add)進 pie 物件，最後用 render 函式將圖表劃到畫布上！

<script type="text/javascript">

var p = new pie();

p.add("Item 1",10);
p.add("Item 2",56);
p.add("Item 3",52);

p.render("canvas_name", "Chart Title", 250);

</script>

執行範例如下 ( 下圖與上述範例無關 )：

其他的圖表也都跟 Pie Chart 一樣簡單，在 *.js 中都有範例可參考：

相關連結

• High Performance JavaScript Vector Graphics Library
• DHTML / CSS based bar graph, line graph and pie chart
  Download [Bar Graph], [Pie Chart] or [Line Chart] or [Multiple Line Chart]

還記得我之前寫的一篇【如何顯示固定寬度的 Label, 超過會顯示 ...】文章嗎？當時寫說此效果只在 IE 有效，不過最近發現了一篇文章說明如何透過 jQuery Ellipsis plugin 幫你也在 Firefox 也出現“...”符號喔!!

我們都知道在 IE 中使用 CSS 的 text-overflow 屬性可以輕易的達成當顯示文字或一個區塊時可以自動截斷過長的文字顯示，並且會自動出現“...”符號（如下圖示）。

但是同樣的效果卻在 Firefox 中會直接截斷（如下圖示）

因為這樣的效果對於版面配置非常具有彈性，因此我們很多地方都會用到這個技巧，只是在 Firefox 中就難免覺得有點美中不足。

其實 text-overflow 屬性所呈現的 ellipsis 效果在 CSS3 才規範進去了，只是 IE 實做的比較早而已，目前有完成實做 CSS3 的瀏覽器也只有Safari 與 Opera 而已。

假設你原本的 CSS 定義如下（跟我之前文章的例子一模一樣）：

.box2 {
    margin: 0 20px;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    border: 1px dashed #333;
    width: 300px;
    padding: 10px;
}

然後再載入 jQuery 與 jQuery Ellipsis plugin

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.text-overflow.js"></script>

之後在寫一段 JavaScript 就可以將原本套用 box2 這個 CSS 類別的標籤修改成有“...”符號的畫面了。

$(function() {
	$(".box2").ellipsis(true);
}); 

各位如果想用 IE 與 Firefox 線上測試這個效果，可以連到以下網址測試：

http://dl.getdropbox.com/u/534786/index.html

相關連結

• Text-overflow: ellipsis for Firefox via jQuery
• 直接下載 jQuery Ellipsis plugin
• 線上測試 jQuery Ellipsis plugin
• CSS3 . Info - All you ever needed to know about CSS3

在很久以前我們都是用 Table 在排版的，我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版，使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉。但最大的缺點就是版面調整不像 CSS layout 那麼方便，而且網頁出現的時間比較長，版面的問題應該無解，但表格顯示的速度卻可以利用 table-layout 屬性的設定達到目標。

CSS 的 table-layout 屬性有兩個可以設定的值：

• automatic    表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )
• fixed            表格的總寬度決定於表格 width 屬性的定義，以及各欄位(Column) width 屬性的定義

預設的 automatic 有個特性，就是當瀏覽器開始下載 HTML 資料時，從 <table> 一直讀到 </table> 才會將網頁顯示出來，這是因為瀏覽器因為不確定 table 應該顯示(Render)的寬度，因此必須等到表格都下載完成後才會顯示資料。

所以你如果利用 <table> 設定整個網頁版面，就會很容易發現網頁下載時會先看到白白的一片底色，最後才會突然出現網頁，這就是因為 table-layout 預設為 automatic 的關係。

所以，當你的表格擁有固定的寬度，例如版面寬度定義為 950px 時，只要將 <table> 的 table-layout 屬性設定成 fixed，並且再設定 width 屬性，就會明顯感覺到表格在下載 HTML 的過程中不會等待 </table> 讀完就會直接顯示表格內容，速度將會差非常多。

相關連結

• table-layout Attribute | tableLayout Property
• CSS table-layout Property

使用 CSS Sprites 技巧可以有效減少 HTTP Request 的數量並且加速網頁載入與顯示的速度。簡單的來說，CSS Sprites 就是將頁面中會用到的背景圖檔全部集中放在一個圖片檔中，並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的背景圖部分露出，對瀏覽器來說，如果整頁的背景圖原本有 30 張就會有 30 個 HTTP Request，但全部合在一張圖片後就只需要一個 HTTP Request 而已，還可以透過 HTTP Cache 技巧將圖片快取在瀏覽器中。

我們在之前也曾經實驗過採用 CSS Sprites 技巧在網站專案中，不過卻遇到一些討厭的問題：

• 若圖片採用 PNG 格式且有用漸層或透明背景的效果的話，在 IE6 會看不到。通常我們會用 IE6 PNG fix 解決此問題，不過 IE6 PNG fix 與 CSS Sprites 技巧不相容！(因為 background-image 與 background-position 的關係)
• 若將 CSS Sprites 技巧套用在網站主選單中，使用者在列印網頁時可能會看不到背景圖，除非他在網際網路選項中有勾選「列印背景的色彩及影像」（預設沒有勾選）。
  
• 套用在主選單還有另一個問題，就是原本應該出現圖片的卻改用「背景圖」處理，雖然我們後來是加入一個「看不見的」超連結替代，不過這種寫法實在有點髒。

最近在 Jennifer Semter 的部落格看到一則 extending css spriting 文章，他不再用 background-image 與 background-position 的技巧，改用標準的 DIV/A 標籤加上 img 標籤與 CSS 的絕對定址與 clip 屬性，直接裁切原本的大圖，將大圖中的一部份切出來顯示在畫面上，一樣是 CSS Sprites 的技巧，但用另一種更好的方法來實做而已。

套用此法的 HTML 如下（摘錄自 extending css spriting 文章）：

<div class="menu-about">
    <img class="transparent_png" 
         src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" 
         alt="About" title="About Us" width="611" height="39" />
</div>

套用的 CSS 欲法如下：

.menu-about { 
    position: relative;
    top: 0; left: -293px;
    width: 106px; height: 29px; 
}
.menu-about img {
    position: absolute; 
    clip: rect(0 399px 29px 293px);
}

我覺得這方法的確比較符合實務的情境，不但能跨瀏覽器，列印的問題也解決了，HTML 也比較乾淨，但對於設計師來說可能會加重一些負擔，因為在設計的時候要去計算 position 的位址與圖片裁切的座標。我認識許多設計師，大多數設計師數學好像不太好，對於太邏輯的東西也有點排斥，要它們學習 CSS Sprites 的設計方式，可能會需要好好溝通教育一番。

相關連結

• extending css spriting
• Best Practices for Speeding Up Your Web Site @ Yahoo
• IE PNG Fix v1.0 / 2.0 Alpha 3
• Caching Tutorial for Web Authors and Webmasters
• 加速前端網頁效能的14條規則

我個人有習慣收集一些網路上別人整理的速查表，因為程式開發的細節真的太多了，要能全部背起來不太可能，也沒什麼意義，甚至於有人說程式設計就是一件查詢、複製、貼上的工作而已。對我來說，寫程式首重觀念與經驗，有了完整而正確的觀念，就算記不得要怎麼寫，查詢一下就馬上能寫了；而有了經驗，對於一些難解的 Bug 自然能夠迅速解開。

所以當我在開發網站時只要開啟速查表文件，有時後看表提醒一下用法，馬上就可以解決問題。例如：像我之前是寫 PHP 好多年之後才突然轉換到 C# / ASP.NET 的，而當初我剛學 .NET 時，對 .NET 的 String.Format 十分感冒，因為不會用，且當時輸入的範例又寫的很不清楚，有時後為了輸出一個 NT$ 1,000,000.00 這樣的格式都要寫好久，真的很氣人。直到有一天在 John Sheehan 這位仁兄的網站看到 .NET Format String Quick Reference 這份速查表文件，因為講解的仔細又有範例，讓我一下子就掌握所有 String.Format 的用法，而這份文件也是我最常用的速查表之一。

以下是我這陣子累積整理的 Cheat Sheets 相關連結，各位如果有覺得不錯的也可以推薦給我，我再放上來：

C# / .NET / LINQ 相關

• .NET Format String Quick Reference [PDF]
• Microsoft .NET Framework 3.5 Commonly Uses Types and Namespaces [PDF]
• LINQ Cheat Sheet
• LINQ Standard Query Operators Cheat Sheet

Visual Studio 相關

• Visual Studio 2005 Built-in Code Snippets (C#) [PDF]
• Visual Studio 2005 Default Keybindings (C#) [PDF]
• Visual C# 2008 Keybinding Reference Poster

ASP.NET 相關

• ASP.NET 2.0 Page Life Cycle & Common Events [PDF]
• ASP.NET Page Life Cycle Diagram [PNG]
• ASP.NET Runtime Cheat Sheet: HttpRequest, HttpRuntime, AppDomain and friends
• Microsoft ASP.NET AJAX Library
• Microsoft ASP.NET AJAX Client Life Cycle & Events [PDF]

SQL Server 相關

• SQL Server Cheat Sheekt

Subversion 相關

• Subversion Cheat Sheet

Reqular Expression 相關

• Regular Expressions Cheat Sheet (V2)

CSS 相關

• CSS Cheat Sheet (V2)

HTML / XML / RGB 相關

• HTML Cheat Sheet
• HTML Character Entities Cheat Sheet
• RGB Hex Colour Chart
• XHTML Cheat Sheet [PDF]

ASP / VBScript 相關

• ASP / VBScript Cheat Sheet

PHP 相關

• PHP Cheat Sheet (V2)

JavaScript 相關

• JavaScript Cheat Sheet
• jQuery 1.2 Cheat Sheet
• jQuery 1.2 API Cheatsheet [彩色版]

系統管理

• Security Log Quick Reference Chart