A-Fu Design

Growl 實際執行畫面

網站中使用 AJAX 讀取檔案或做其他動作時，有時候需要通知使用者完成或者是提示使用者可以進行下一個動作或流程，這時候就需要像這樣的一個效果。Growl 一個簡單又方便的提示訊息視窗，使用 Mootools 框架製作可以創建淡入淡出的效果。

jQuery powerFloat 實際執行畫面

jQuery powerFloat 作者的原意就是強大的浮動層。使用 jQuery 框架支援 hover,click,focus 以及無事件觸發，支援多達12種位置定位，頁面元素加載，AJAX加載，下拉列表，提示層效果，可自定義裝載容器支持跟隨滑鼠等等。效果可以做到像 Google 上排選單更多的那一個連結一樣，按下去之後有更多的選項可以點選。

Spin.js 實際執行畫面

現在網頁設計上，常常都會使用到 AJAX 來做異步的存取，在作用當中想讓使用者知道在讀取中大部分的人都會使用到圖片。然而這一支程式的不是用圖片來完成這一個提示的動作，是使用 CSS3 來渲染使用者的介面，當瀏覽器不支援時會改採用 VML 的方式來產生。不需要圖片也沒有外部的 CSS 檔案，不依賴框架。相容於 IE6 以上版本，相當於相容於近代所有瀏覽器，檔案大小僅 4.11 KB 比一個 GIF 的動畫圖片還小。

ExColor 實際執行畫面

ExColor 是一個 jQuery 的套件用於創建一個類似於 PhotoShop 的顏色選擇器，他附加在 input 的元素上，透過一個簡單的函示就能夠調用顏色選擇器。顏色選擇器中的每一個元素都設計得非常的靈活，自帶有十種不同的設計選項供開發者選擇。

xmlObjectifier 資料轉換前後

尋找一種簡單的方法把XML轉換為JSON對象嗎？xmlObjectifier的目的是協助工作與XML數據的編碼器，能夠快速，輕鬆地處理XML文件，使用熟悉的為JavaScript developpers方法的。這個有用的代碼將提供透明的腸梗阻層到這些應用程序使用JSON和XML數據，它也允許你緩存的數據，以備後用。 xmlObjectifier是寫在客戶端的JavaScript在各種瀏覽器，以減少處理開銷，並提供最佳的兼容性。

liteAccordion 實際執行畫面

liteAccordion 是一個用來快速創建吸引人的水平折疊效果的 jQuery 套件。套件的大小只有 1.4 KB 左右，可以展示任何的 HTML 元素包括：圖片、段落、視訊和 Flash 等等。可以設置無限個分層檢視，並且可在初始化中選中其中一個分層頁面中。另外還可設置包括：自動撥放、暫停播放、轉換速度等等。liteAccordion 還支援自定義外觀，內建有五種外觀可以選擇。

Joyride 實際執行畫面

 Google 推出新功能的時候第一次使用都會有逐步的提示視窗說明，Joyride 也就是類似這一個功能的 jQuery 套件，利用它來創建一個引導使用者逐步操作您的網站功能，透過定義一個一個步驟的操作順序，可定義提示方塊的位置滾動到下一個步驟的速度等等。綜上所述， Joyride 是一種幫助用戶找到網站功能簡單又有效的方法。

jQuery Collapse 實際執行畫面

jQuery Collapse 是一個輕量級的折疊式選單套件，看名稱就知道是基於 jQuery 框架所撰寫的套件，可支援 Cookie 的進行狀態保存功能，可以讓你的網站使用者記得且知道他上次使用的進度或者是換頁面的時候可以當成選單來記錄使用者的選擇。

Grumble.js 實際執行畫面

Grumble.js 是一個用來創建球型氣泡提示訊息的 jQuery 套件，可淡出淡入展示也可以設置自動消失或手動關閉。提示訊息的位置可以靈活自動的變化，還可以圍繞一個指定元素的任何角度做360度的旋轉，亦可指定任何的距離可作用於IE6+的瀏覽器，IE都可以用了其他近代的瀏覽器幾乎都相容。

ImageSelect 實際執行畫面

如果在設計網頁時，需要使用者選擇某一個圖片大部分的設計師都會選擇使用 radio 的表單元素來使用，但是如果有大量資料的話又會佔用了很多的空間，那就來試試這一個基於 jQuery 框架開發的 ImageSelect 把圖片放進 select 的表單元素之內。

Sweet Tooltip 實際執行畫面

在網頁上有一些功能可能不是非常明顯或者是步驟容易混淆的功能，如果能夠讓滑鼠事件就能讓使用者了解接下來該做什麼步驟，一個小小的提示視窗對不了解網站的作業流程的使用者是非常有用的工具。Sweet Tooltip 是一個以 CSS3 和 jQuery 框架為基礎的提示訊息套件，裡面有包含了七種不同設計樣式的提示訊息方塊。

Flipping Image Gallery 實際執行畫面(最上一張抽離中)

這個套件利用 CSS 的 z-index 屬性和 jQuery 框架實現的一個非常獨特的 Image Gallery，讓使用者有拿著圖片看的感覺，動畫向上抽走一張放到最下層，或者是在最下層抽走一張在移動到最下層，就像實際拿著一疊照片觀看的感覺。

PikaChoose 實際執行畫面

PikaChoose 圖片藝廊設計是一個輕量級的 jQuery 幻燈片套件，jCarousel 可以順利的與 PikaChoose 整合成簡單又有效果的旋轉選單，PikaChoose 的設計可以很容易地安裝，易於安裝，兼容任何託管服務提供商，現在甚至有高級的主題樣式。詳細請看作者網站。

Flexible Nav 實際執行頁面

Flexible Nav 可用於網頁右側增加智能導航標籤，類似網頁書籤或者是檔案目錄的功能，對於比較內容比較多的頁面有導航的作用，增加網站適用者體驗。靈活的使用 jQuery 框架，它改善了網頁的導航和可視化的文件的不同部分，文章，..任何網頁。導航鏈接，按比例分配到頁面的部分。

Fixed Fade Out Menu 實際執行畫面

Fixed Fade Out Menu 當你向下滾動頁面選單會呈現半透明的狀態，成為幾乎是透明的。當用戶將鼠標懸停在它的菜單，然後再次變得不透明。我們將有一些鏈接，一個搜索輸入和一個回到最上方和到達頁尾的按鈕，讓使用者導航到該頁面的頂部或底部。

A Stylish Navigation Menu With jQuery 執行畫面

正如你可能知道，一個新的訪問者與網站互動的第一個20秒的確定它們是否要留下或者離開。這意味著你必須遵循共同的設計手法，把網頁做成使用者喜歡的樣式。這個是一個簡單又時尚的 CSS + XHTML 的導航選單 基於 jQuery 框架完成。

jQSlickWrap 實際執行畫面

jQSlickWrap 主要運用到 HTML5 的 canvas 元素，特別是 toDataURL() 這一個函數，所支援的瀏覽器 Mozilla Firefox 3.5+、Google Chrome、Apple Safari 4+、Opera 11+ 目前並不完全支援IE，未來等 IE 10 之後看他是否有改善囉。這一個套件能夠讓不規則形狀的圖片旁邊也能放進文字，讓網頁的空白大量的減少能放進更多有用的資訊。

Fly Off Page 實際執行畫面

Fly Off Page 可以讓使用者把不要看或已經不需要的網頁元素利用滑鼠或鍵盤事件從網頁中移除，讓移除網頁元素的過程可以變得有趣一些，這一個套件是基於 jQuery 框架所做成可擴充性高，可設定元素飛出的方向和速度並且忽視原本網頁元素佔用空間。

iconDock 實際執行畫面

iconDock 是基於 jQuery 框架下的一個套件，可以創建類似 Mac OS X 系統選單的網頁選單效果，圖標可添加對上下文有幫助的提示文字。適用於近代所有瀏覽器瀏覽。

NotesForLightBox  實際執行畫面

NotesForLightBox 是一個 jQuery 的套件簡單容易使用，可覆蓋過當前頁面的圖片和內容，這是一個可以設置和適用於所有的現代瀏覽器，圓角播放的燈箱還有擁有導航的按鈕和幻燈片播放功能還有幻燈片顯示進度條。

LeaveNotice 實際執行畫面

LeaveNotice 是一個 jQuery 的套件，方便的通知您網站的使用者離開您的網站，以確保讓用戶知道他正要連結到部屬於您的網站區域中。就像是 Yahoo 部落格一樣離開網站連結的時候出現的視窗。

Twitter Follow Box 實際執行畫面

可以在你自己的網站顯示 Twitter 的跟隨者數量及跟隨連結，就跟 Facebook 的社群套件一樣(Social Plugin Like Box)，可自定義顏色大小以配合您的網站設計。

Adipoli 實際執行畫面

Adipoli 一個簡單的 jQuery 套件，讓網站的圖片更有時尚新穎的效果，設計上有用到 HTML5 的技術所以舊式的瀏覽器並不支援。

Canvas Photo Experiment HTML5 Canvas 實際執行畫面

可自由和輕鬆的旋轉和縮放圖片，圖片來源高度自由導入導出不同的圖片格式，並且可為圖片加上邊框或任何的CSS設計，圖片的匯出主要使用到 HTML5 的 Canvas 的網頁元素，支援大部分近代的瀏覽器。

實際執行畫面

類似 Facebook 搜尋的樣式的提示搜尋，使用 jQuery 框架 AJAX 非同步搜尋資料，高速的使用者端緩存方式。

jqDnR 可拖曳及調整大小 實際執行畫面

jqDnR 是一個輕量級的一個 jQuery 套件，可以讓您的網頁元素可以拖曳並且可以調整元素的大笑，可定義可放大元素的作用區域，也可支援半透明的拖動方式。

jQuery hotkeys 實際執行畫面

鍵盤熱鍵套件簡化網頁事件的操作步驟，可以讓您可以輕鬆的添加或移除熱鍵，在你的網頁任什地方幾乎都能夠支援組合鍵的鍵盤事件，jQuery hotkeys 基於 jQuery 框架開發簡化網頁元鍵操作擴充性大。

Moving Boxes 實際執行畫面

Moving Boxes 是一個 Content Slider jQuery 套件，提供按鈕控制內容面板的變化放大縮小，內容面板的數量和初始化大小與寬度都是可以利用參數控制，還可以支元使用鍵盤的導航鍵來控制面板內容的更換。

Dynamic Image Gallery and Slideshow 實際執行畫面

Dynamic Image Gallery and Slideshow 非常輕量級的一個圖片畫廊和幻燈片程式，程式主體內容僅3KB還包含不少效果，有著優雅、簡單、檔案小需求的開發者這個套件功能絕對非常適合的您的網站。

jRating 星級評等系統實際執行畫面

jRating 是一個非常靈活的 jQuery 套件可快速創建AJAX的星級評等系統，這是可以配置很多種功能細節的套件，也可以更改顯示的大或小的星星圖像，jRating 也可以使用任何的伺服器端語言來記錄使用者選擇。

Control.ProgressBar 百分比進度條實際執行情形

Control.ProgressBar 是一個基於百分比的進度條，可以設置為固定時間間隔執行程式或者是手動設置進度條進度，只需要建立一個DIV相對或者絕對位置，將 JavaScript 設置內部元件的寬度等等。

密碼強度檢測工具實際執行畫面

 jQuery password strength meter 套件能用在註冊時就先檢查密碼的強度，現在很多網站都有會員機制，很多人怕密碼會忘記或是偷懶都會用一些很簡短簡單的密碼，這樣就讓其它惡意的使用者就有機可趁，這也讓網站的管理者很頭大。

jQuery lightBox 套件實際執行情形

jQuery lightBox 套件是一個簡單容易使用，可覆蓋過當前頁面的圖片和內容，運用 jQuery 框架開發擁有更強大的靈活性。

jQuery Pagination 實際執行畫面

大量資料資料想要呈現給使用者的時候，沒辦法全部的資訊都一次顯示所以只能用分頁的方式，但是分頁又非常的浪費網路資源所以這一個套件就誕生了，要換頁時他只需要換掉頁面本身的元件位置，並不用整頁都更新過後才能使用。

iCarousel 旋轉燈籠式圖片展示實際執行畫面

Web 開發人員常會遇到很多的連續內容需要展示，有可能是一些文章片段也有可能是一堆圖片等等的，因為有這樣的需求，所以就出現了旋轉方式的展示方式，這一個套件就是幫助開發者擁有豐富的展式介面且容易使用的方法。

Colour Picker 2.0 實際執行畫面

Colour Picker 2.0 此套件會再一個 SELECT 元素中填充顏色，把顏色以顏色的小方盤呈現可自定義色彩，簡單容易使用檔案更只有1KB而已。

ContextMen 實際執行畫面

ContextMen 是一個輕量級的 jQuery 套件，可以讓你有選擇性的重寫瀏覽器的右鍵選單功能，並且能夠自定義右鍵選單的內容。

jQZoom 實際執行畫面

jQZoom 是一個  JavaScript 的圖片放大鏡基於 jQuery 框架之下，jQZoom 可放大你想放大的地方一個簡單而容易使用的套件。

fValidator 實際驗證畫面

如今，每個人都知道，JavaScript可以被用來驗證輸入資料的HTML表單中的內容發送到服務器之前。儘管，有很多表單中的字段時，在 JavaScript 驗證變得太複雜，枯燥的代碼。這就是為什麼 fValidator 出現的原因。

選單實際執行畫面

e24TabMenu 是一個可置於網頁最頂端滑動可展示簡介內容的一個套件，選單可以平穩的展開與收縮。

Curl.js 實際執行畫面

Curl.js 可以幫助你在您的網站上的圖片增加捲曲的效果(包含背面遮罩)，沒有依賴在任何一個框架之下，可以在所有的主流瀏覽器中執行，Mozilla Firefox1.5 +、Opera 9+、Safari、IE6+、Google Chrome，使用方法簡單也支援圖片動態增加捲曲效果。

Flot 實際執行畫面

FLOT是一個 JavaScript 的統計圖表繪製套件，基於 jQuery 開發。能夠在可戶端根據任何資料的集成快速生成圖片，可繪製長條圖、圓餅圖、線性圖等等。使用HTML5的 Canvas 標籤來繪製圖表，IE9以下只要再多加載 excanvas.min.js 就能更讓瀏覽器暫時支援HTML5 的 Canvas 標籤來繪製圖表。

Videobox 實際執行情形

jqUploader 實際執行頁面

jqUploader 是一個基於jQuery 框架下的上傳套件，替換HTML文件上的字段和一個基於Flash文件上傳的小工具，可以顯示一個進度條和本分比，例如，如果想透過HTML指定最大的文件大小之類的設定豐富了及時上傳的使用者介面。

Date Input Calendar 實際執行畫面

Jason's Date Input Calendar 是專為減化輸入到表單中的日期值，支持多種日期格式，方便簡單使用不需載入框架檔案直接就可以使用，支持大部分的瀏覽器 IE6+、FireFox、Chrome、Opera。

Text Highlight 實際觸發時畫面

搜尋或者是某些時候網頁上需要一小段文字讓使用者看得更加的清楚，這一個小套件可以幫助開發者更快的完成這一個動作，並且也可以復原成尚未添加高亮的狀態，程式碼很精簡使用上也很方便，主要還是基於 jQuery 之下要在新增套件或做其他動作都很方便。

EasyDrag 實際執行畫面

EasyDrag 這一個套件可以讓大部分的 DOM 元素都可以有拖曳的功能，基於 jQuery 框架撰寫套件的體積很精巧，主要就是拖曳和拖曳後可使用回調函式來讓程式做下一個要執行的事情。

實際執行畫面

Flexigrid 式一個類似 Ext Gird 或者像是 Office Excel ，基於jQuery 開發的 Grid。它具有的功能包括：可以調整列寬、合併列標題、分頁、顯示/隱藏表格等等的。Flexigrid 顯示的數據能夠透過Ajax 來取得或者從一個頁面上的表格做轉換。

實際執行畫面

極為精簡摺疊選單套件，僅僅使用到 Mootools 框架本身並沒有多出很多的 JavaScript 的程式碼，如果沒有需要用到很多功能的使用者可以使用這一個套件，基本的折疊顏色的更換都是很完美的表現出來。

Farbtastic Color Picker 實際執行畫面

Farbtastic Color Picker是一個jQuery套件，可以添加一個或多個顏色選擇器窗口小部件到一個頁面透過JavaScript。每個窗口小部件，然後連接到一個現有的元素（例如，一個文本字段），選擇一種顏色時，將更新該元素的值。