A-Fu Design

dPassword  密碼逐步隱藏 jQuery 框架套件

有時候在網頁輸入密碼時，會忽然不知道自己剛剛打到的是什麼字，接下來該打什麼字才是正確的密碼，這個時候大部分的人都只能夠把它全部都刪除之後再重新的輸入一次，這樣才能確保輸入的是正確的密碼文字。dPassword 這是一個基於 jQuery 框架咖開發的套件，在輸入密碼時會跟手機打密碼一樣，顯示最後一個輸入的文字其他隱藏住，如果忽然有人跟你說話你也還可以確認你剛剛輸入了什麼樣的文字了。

jQuery blockUI 等待中套件基本樣式

jQuery blockUI 這一個 jQuery 套件能在網頁上增加一個遮罩的圖層，阻擋使用者在操作別的步驟。當設計很多需要用到 JavaScript 或者是 AJAX 的動作時，通常需要一些執行的時間，但是如果使用者在這一個時間又操作了不同的動作，有可能會造成程式執行不正常或中斷，所以有了這樣一個兼具提示訊息又能夠防止使用者操作的 jQuery 套件。

QuickFlip2 網頁元素翻頁效果

QuickFlip2 是一個可以讓任何的 HTML 元素標籤產生類似卡片翻轉效果的一個 jQuery 框架套件，看起來的效果就像是在 Apple iPhone 上的 UI 動畫一樣。可讓一些不太重要的資訊顯示於背面，當使用者有需要的時候才去點擊翻到背面去查看內容，也同時省下了很多的網頁空間可以拿來放置更多對網站有用的資訊。

jFontsize 網頁文字大小控制器

jFontsize 是一個輕量級的容易使用的一個基於 jQuery 框架的套件，用於在頁面上建立 A+ 、 A- 這樣的按鈕以便於改變文字的大小。支援自定義的按鈕樣式可透過參數設定字體最大可改變次數，以及每次變化的間隔大小等等。以方便不同的使用者瀏覽網頁。在網頁中增加這樣的一項功能，就能夠有效的提高用戶體驗。

jQuery TWzipcode 縣市區域選單

在製作網頁時偶爾會需要使用者的資料，為了讓使用者更有意願的填入資料所以開發者需要簡化輸入的步驟，讓使用者輸入的時候不會感覺到要輸入很多東西覺得很麻煩就離開了。jQuery TWzipcode 這一個 jQuery 套件還提供了多個預設選項可提供開發者使用，而且對某一些的瀏覽器使用者還可以偵測使用者的位置來直接幫使用者填入選項。

3D CSS3 Book Generator 網頁圖片翻頁 3D 特效

3D CSS3 Book Generator 使用 HTML5 以及 CSS3 的設計加上 jQuery 框架建構出 3D 書本翻頁的效果，主要是想讓使用者能夠有一個友善的介面來觀看網頁上的資料或圖片，以原始的文字和圖片內容來做為書籍的基礎，就像真的在看書一樣左右兩側都會有內容，有導航按鈕在書本的左右兩側，當使用者按下一頁時就會看到以 CSS3 設計的 3D 翻頁特效。當然導航的方式可以隨開發者來自行設計與定義。

Scroll Follow 跟隨元素

Scroll Follow 是一個能讓網頁的元素跟著使用者移動基於 jQuery 框架開發，簡單容易使用並且兼容於多瀏覽器，可相容於 Opera 9+、Apple Safari、FireFox、Internet Explorer 6+、Google Chrome 等等的近代的瀏覽器使用。

Portfolio Image Navigation with jQuery 圖片套件

Portfolio Image Navigation with jQuery 可以組合多張圖片呈現一個圖片地圖，再以上下左右平滑的移動到要看的圖片內容中，可以以分組方式排成一列來區別，在可以以 2D 方式導覽當前的圖片位置上下左右的平滑移動。範例中美麗的圖片是由 Angelo González 所攝影，可以在 Flickr 查看他的作品或者是在 Twitter 搜尋 @ag2r 找到他的作品。

Zebra_Cookie 網頁 Cookie 存取套件

在 JavaScript 中如果要處理 Cookie 的時候就需要多很多的動作，而 jQuery 框架也沒有包含 Cookie 的處理功能，所以需要這類型的套件來輔助開發者更加容易地做 Cookie 的處理。Zebra_Cookie 容易讀取、寫入和刪除 Cookie 的動作，非常簡單而且直觀的語法和 jQuery 的寫作方式完美相容，而且套件容量極小化。

jQuery 框架 網頁倒數計時器

網站倒數計時類似記分版翻頁的效果基於 jQuery 框架，網站在開戰前如果就開始有宣傳活動，那已經註冊的網域讓別人連不到會降低以後使用者在來訪的意願，如果只是一張 Coming Soon 的圖片又顯得太單調，所以需要用到倒數計時，讓使用者知道多久之後再回來這邊就可以看到他所期待的內容。

jQuery contextMenu 右鍵選單

使用 jQuery 框架簡單方便的網頁右鍵選單 contextMenu，可以很容易地曾下上下文的右鍵選單，在任何的網頁程序上面，可以讓網頁看起來更像在使用應用程式的感覺。支援鍵盤控制且可無限量的產生自訂的子選單，可使用禁用項目增加和刪除項目讓選單刷新，支援右鍵或左鍵單及控制多元素可共享選單，個別選單可自訂一回調函式。

Bubbleriffic Image Gallery with jQuery 圖片展示套件

Bubbleriffic Image Gallery with jQuery 建立一連串的氣泡圖片庫列表，以獨特的方式顯示你的圖片。允許使用者移動氣泡列表的圖片滑過放大為整個縮圖，點擊縮圖以圓形的方式放大到整個瀏覽器中並自動調整圖片大小。圓形小縮圖導航可利用滑鼠左右滑動，營照出時尚美麗的導覽列。範例中照片來自 geishaboy500 可以到 Flickr 找到該作者的作品。

ThickBox 3.1 彈出式對話視窗

ThickBox 3.1 網頁對話框套件基於 jQuery 框架開發，可以利用來展示單張或多張的圖片會產生導覽列供瀏覽全部的照片，也可以展示同一個頁面上的任何網頁元素，還能夠使用 iFrame 來連結別的網頁放進對話框中，重要的是還能夠透過 AJAX 的方式取得內容。簡單容易使用並且容量輕巧，壓縮過後的檔案僅 10 K 左右。

標籤雲( tagcloud ) 基於 jQuery 框架

標籤雲記得之前有看過的大部分都是以 FLASH 來製作，但是現在大部分的網站設計的人都知道 SEO 的重要性，所以在網頁設計上盡量的減少 FLASH 的數量，改使用 JavaScript 來達到類似的效果。現在要介紹的標籤雲就是其中一個例子，這一個 jQuery 套件讓你網頁的所有標籤文字全部聚在一起就像一個球的形狀，達到既美觀又實用的效果。

Zebra_TransForm 表單美化套件

Zebra_TransForm 使用 jQuery 框架美化網頁選單的選擇框、單選按紐和複選按鈕，以達到跟外觀和感覺他是一個跨瀏覽器的操作，或者讓使用者感覺不是是在網頁而是在使用應用程式的感覺。Zebra_TransForm 是一個很小的 jQuery 套件(壓縮後僅 3 KB)，在不犧牲功能和輔助的功能下改變表單元素的外觀設計，可在大部分現代瀏覽器中瀏覽。

imgCentering.js 圖片置中顯示

在設計網頁時，偶爾需要用到圖片的列表來顯示，但是網頁的大小往往都不能夠剛剛好適合你的需要，如果是新網站還比較好控制，那如果是既有的網站改版圖片的比例已經固定了，這個時候你就需要用到，imgCentering.js 讓網頁設的圖片列表可置中對齊又不會讓圖片變形，也不會對伺服器造成負擔，因為主要是使用到了用戶端來做運算。

Zebra_Accordion 折疊式選單

Zebra_Accordion 輕量級的手風琴折疊式選單基於 jQuery 框架製作，它定義在一個列表中而且不需要其他任何的特定標記，容易配置完全可以訂製的跨平台的折疊式選單套件。外觀容易使用 CSS 來做訂製，可作用於 FireFox、Opera、Apple Safari、Google Chrome、Internet Explorer 6+近代的瀏覽器中。

uLightBox 簡單輕巧的對話視窗 - 基於 jQuery 框架

在設計網頁的時候，有時候會需要用到回覆視窗來跟使用者溝通。但是有時候會覺得瀏覽器預設的彈出視窗沒有那麼好看，所以有了這一個 uLightBox 套件基於 jQuery框架撰寫。這是一個彈出式的對話視窗，可以以黑幕蓋住其他的網頁部分讓使用者不要有別的動作，讓使用者專注在唯一的一個對話框上知道了解你要請使用者作的指令或提示。

Magnify 圖片放大鏡 -  jQuery 套件

設計購物網站時，常常都會覺得圖片的位置不夠用，不能夠讓產品的圖片很漂亮的展示於使用者瀏覽，Magnify 可以讓您輕鬆地建立一個圖片的"放大鏡"，您只需要建立一個小型圖片和一個大型圖片大小的比例，相對應的配置您的標記就可以使用了。Magnify 基於 jQuery 框架開發，所以支援大部分的瀏覽器例如：IE6+、FireFox、Apple Safari、Google Chrome等瀏覽器。

FancyZoom 1.1 圖片浮出展示

FancyZoom 是一個可以平滑的放大你網頁上的圖片或任意的 HTML 頁面，專注於流暢且優美的縮放動畫的執行，自動調整圖片的大小，滑鼠移過時就會馬上加載圖片的內容節省下使用者等待的時間。適用於大部分瀏覽器包括：Apple Safari、IE6+、FireFox、Google Chrome。在近代瀏覽器中使用效果最好，因為有使用到 CSS3 的陰影部分。

jRumble 讓網頁元素有震動效果

jRumble 是一個可以讓網頁上的任何元素產生抖動、震動、搖動特效，可設定多種的方法來產生動畫的特效，使用這些特效的目的是希望可以更加吸引使用者能夠很快的注意到這一個網頁元素。jRumble 基於 jQuery 框架製作可以讓開發者更加容易地為網頁元素增加方法來執行 jRumble 的動畫效果，也因為是使用到了 jQuery 框架，所以對大部分瀏覽器都是有支援的。

3D Thumbnail hover effects 圖片 3D 動畫摺疊效果

3D Thumbnail hover effects 滑鼠滑過圖片的所發生的 3D 動畫摺疊效果，建立一個結構將允許我們使用 jQuery 框架使圖片顯示為摺疊或者是彎曲，當使用者的滑鼠滑過時，使用 CSS3 和 jQuery 讓圖片產生 3D 的變化效果。這一個範例因為是使用 CSS3 ，所以並不支援對 CSS3 沒有支援的 IE10 以下的瀏覽器並不支援。

Zoomer Gallery 類似 Flash 放大效果的圖片特效

Zoomer Gallery 建立類似 Flash 的圖片放大效果，可以讓你網站上的圖片在使用者滑鼠滑過的時候，開啟啟動動畫效果去除邊框慢慢放大並且顯示出標題文字，看起的效果就跟 Flash 做出來的沒有兩樣。Zoomer Gallery 使用 jQuery 框架撰寫，支援 IE7+、Google Chrome、Apple Safari 等等的近代瀏覽器。

Humane JS  提示訊息可顯示右上方或正上方或者是中間

Humane JS 沒有使用任何 JavaScript 框架開發的提示訊息，簡單、現在化、獨立的程式碼、不占用太大位置的一個提示通知工具，利用 CSS 轉換來製作動畫效果，可支援現在大部分的瀏覽器也包含了現在的移動設備支援。Humane JS 還提供了五種的提示訊息的設計樣式，可在程式進行時隨時的改變提示的外觀設計。

jQuery.popeye 2.1 可延展大小的圖片展示櫃

jQuery.popeye 2.1 快速易於安裝又可延展大小的圖片展示櫃套件基於 jQuery 框架開發。可以利用它來節省你網頁上的空間，並且為您的使用者提供了一種漂亮和優雅的方式來顯示縮圖，而且在察看原始圖檔的時候也不需要離開頁面，直接於當頁瀏覽並附有導覽列。快速且易於安裝的原始碼，提供了極大的靈活性、方法和造型。

YUI Slideshow 圖片展示櫃

YUI Slideshow 是基於 YUI3 框架所製作而成的圖片展示櫃套件，主要的功能是讓您在設計網站的時候，能夠簡單方便的將所有的 HTML 元素的子元素組成一個可定制的展示櫃動畫。YUI 可能有些人不知道是什麼 Yahoo! UI Library 這是框架的全名，這樣一看就知道了，簡單的說就是 Yahoo 開發的 JavaScript 框架。

Pretty checkboxes with jQuery 上下為使用前後

在設計表單的時候，偶爾會覺得瀏覽器預設的元件看起來不夠好看也不夠顯眼，可能會讓使用者填寫表單的時候感覺這個網站很一般，跟其他的沒什麼不一樣。Pretty checkboxes with jQuery 這一個主要是設計了一個美觀又大方的表單 Checkbox 元素，讓使用者不只是感覺到不一樣，而且也具備了實用性能夠填入的敘述文字也更多了。

Merging Image Boxes with jQuery 分裂成小縮圖動畫中

Merging Image Boxes with jQuery 以亂數擺放縮圖的角度讓使用者看起來好像是擺放在桌上的照片一樣，當點入一張照片的時候所有的圖片會以動畫方式匯集到中間並且改變圖片內容，轉變成為使用者選重的圖片的那一張大圖，左右會出現上下張的導覽標籤可直些上下張瀏覽，也可以再回到初始的狀態從小縮圖中在瀏覽照片。動畫效果在 Apple Safari 和 Google Chrome 瀏覽最佳。

rlightbox 輕量級的 Lightbox 基於 jQuery 和 jQuery UI

rlightbox 是一個簡單且輕量級的一個 Lightbox 套件基於 jQuery 和 jQuery UI 實現。擁有一些和現在常見的 Lightbox 套件不同的特性，rlightbox 能夠展現出任何的 HTML 內容包括：圖片、影片、Flash檔案和 HTML的內容。rlightbox 有一個更為獨特的全景功能，能夠用於顯示圖片部分，一開始只顯示圖片一某一部分，但是允許使用者平移查看圖片中的其他部分的內容。

Color Picker 顏色選擇器

Color Picker 應用在一般表單元素 SELECT 的顏色選擇器基於 jQuery 框架開發。這意味著 Color Picker 將與大多數的瀏覽器都會相容，在 SELECT 旁會出現一個小圖，點選他就會以淡入淡出的方式顯現出顏色選擇器的主體，SELECT 的顏色內容能夠改變顏色選擇器的小圖顏色，相反的顏色選擇器選擇的數值也能夠改變 SELECT 的色碼。

Sudo Slider 是一個功能非常豐富的內容展示櫃套件基於 jQuery 框架開發，能夠以各種展現方式來展示任何的 HTML 內容。Sudo Slider 還可以利用 AJAX 加載的方式來展示取得的內容，單一頁面可以放置多個內容展示櫃套件。外觀內容完全可以使用 CSS 來自行定製，內容可垂直水平方向和淡入淡出得過場動畫，支援 IE6+、FireFox、Opera、Apple Safari、Google Chrome等瀏覽器。

Joomla! 友善的介面

Joomla!是一款優秀的CMS，功能強大、中文支援度不錯，有活躍的社群、討論區等等。Joomla! 2.5 新版本推出一小段時間了，這是下一個階段長期支援的的版本。操作上的一些觀念跟Wordpress差不多，佈景、外掛、模組、文章等等，雖然比較複雜花點時間熟悉一下就不是問題。

StyleTable 表單美化

設計網頁的時候，網頁的 table 這一個元素是既方便又複雜的一個東西，很方便就能把你要的資料排列進去，但是雖然是排得很整齊不過表格本身卻又感覺不好看。StyleTable 這一個套件基於 jQuery 框架開發能夠簡單的為 table 網頁元素進行美化的動作，使用方法非常簡單，並且提供了多種的樣式可以選擇。

Slot Machine Tabs 非同步捲動內容的標籤選單

Slot Machine Tabs 不同步捲動內容的標籤選單，以 jQuery 框架開發。當使用者點下不同的標籤時，標籤的內容會以不同的過場動畫時間來捲動，有點像是玩角子老虎機的感覺，讓使用者在看內容的時候也會感到有趣味性。

Accordion Menu 折疊式選單

Accordion Menu 折疊式選單，在這一個折疊式選單中標題的部分是使用 H3 的網頁標籤，展開的內容子標題是採用 ul 和 li 的網頁標籤組成。一個 CSS 的類別動態的添加到這一個表單當中。標題 H3 標籤點擊來做摺疊選單的開 / 合的動作，一個選單開啟後會關閉其他之前開啟的選單項目。

Rotating Image Slider 特殊排列展示櫃

Rotating Image Slider 創建一個非對稱一點點扭曲的圖片展示櫃基於 jQuery 框架，內容圖片以扇狀圖片本身不規則的角度切割，有自動撥放和上下頁導覽的功能更具備了滑鼠滾輪捲動來更換圖片，這一個範例還運用到了一個 jQuery 2D Transformation 的套件主要視角度轉換和動畫效果的套件。圖片授權非商業性使用。

粉絲專頁的社群套件

如果你有一個網站或者部落格，並且在 Facebook 擁有粉絲專頁，你想要讓你的網站或部落格中的使用者也能夠看到你在 Facebook 中的動態，或者是想要讓使用者能夠在你的網站中加入你的粉絲團，Facebook 有提供了這樣一個簡單的社群外掛套件，讓所有使用者都能夠簡單的把這一個工具加到你的網站或者部落格當中。

YoxView 網頁內容展示視窗

YoxView 是一個可以靈活訂製設定的一個圖片套件 ( Lightbox ) ，用於展示單張或多張圖片也可展示影片或者是任何的 HTML 元素。可以在一個對話框中利用向前 / 向後的按鈕或者幻燈片的方式來瀏覽圖片。YoxView 支援一個頁面放置多組不同的內容，也可單獨做設定。YoxView 還支援多種語言包含中文，可以透過語言文件訂制。可使用 jQuery 框架也可以不包含框架本身就能更直接的使用。

EditArea 線上原始碼編輯器

EditArea 是一個原始碼編輯器，可支援原始碼格式化，搜尋字詞高亮顯示，文字替換。目前 EditArea 所支援的程式語言包括：PHP、CSS、Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck。能夠用來與同伴們共同開發檢討自己的原始碼問題，或者是以此方式來對學生教學等等。

Ajaxy Photo Gallery (jQuery) with Custom Images Sets 照片展示櫃

使用 AJAX 建立一個自訂相片內容的相片展示櫃，基於 jQuery 框架製作簡單容易使用，非同步的好處是可以讓使用者感覺網頁開啟較為迅速，不需要等到圖片的網址全部解析完成之後才開始顯示網頁，只需先讀取完靜態的檔案後顯示出來才開始讀取所有圖片的內容，所以使用者本身感覺會比較快。

jQuery Notty 右上角訊息提示視窗

建立互動式網頁時，有時候會需要一些方式來提醒使用者該做別的動作，或者是不要做哪些事情抑或者是提醒使用者一些事情。這個時候 jQuery Notty 就是很好用的一個套件，基於 jQuery 框架製作件單容易使用。還可以設定提示秒數、顯示秒數還有點擊後的回調函示等等的。

Portamento 隨卷軸移動的方框

Portamento 類似 Facebook 右邊廣告會跟著捲動的工具選單，不管使用者瀏覽到哪一個段落選單都會一職在旁邊滑動，或者是像 Facebook 一樣做成贊助商的列表，能為贊助商帶來更大的瀏覽版面。Portamento 的工作原理是使用浮動和絕對位置的設計方式，只需要一些簡單的 CSS 和 JavaScript 的程式碼就可以完成了。

Inset Border Effect 網頁元素動態邊框

Inset Border Effect 這是一個能夠幫圖片或這是網頁的元素增加一個動態邊框的套件，基於 jQuery 框架製作。當滑鼠移到上面時邊框就會自動消失，當滑鼠移出作用區域時邊框又會自動的增加上去，就跟 CSS 的 hover 的功能基本上是差不多的，只是讓邊框消失或者是重新出現的時候，增強了他的動畫效果，像是淡入淡出之類的。

Lightbox me 浮動視窗

在設計網站的時候，是否有想過要把網頁上的某一個 DOM 元素變成一個浮動式的視窗呈現，但又不希望太過花俏。Lightbox me 是一個 jQuery 框架所製成的一個套件，能夠把一個網頁上的 DOM 元素變成一個浮動式的小視窗，當瀏覽器變化時視窗的位置會自動調整。能夠很好的處裡大部分瀏覽器邊界的問題，如視窗調整或視窗比對話框小等等的。

jCapSlide 浮動於圖片的透明圖層

jCapSlide 能夠建立一個覆蓋在圖片之上的透明圖層，當滑鼠滑過之後才顯示出全部資訊，並不會把圖片本身全部都蓋住。還可以設定圖層的顏色、背景、框線和剛開始是否顯示圖層的設定。基於 jQuery 框架開發，美觀有實用的一個套件程式。

WowWindow 對話視窗 - 動畫執行中

WowWindow 是一個高級模式對話框的程式類似於 Lightbox 。能夠讓你從圖片、HTML內容或者是影片建立一個可以縮放的對話視窗。WowWindow 運用 CSS3 的過場動畫來展示對話視窗，並不是所有瀏覽器都支援這樣的轉換效果。IE系列瀏覽器因為對 CSS3 的支援太少，所以僅支援 IE9 以上的版本，其他像 Google Chrome、FireFox、Apple Safari 都可以正常支援。

jPhotoGrid 浮出圖片方便瀏覽

jPhotoGrid 能把放大的圖片直接放在截圖列表上方的一個 jQuery 套件，這個套件可以輸入原始圖片和圖片的介紹文字，並且把介紹文字和放大的圖片放在一個簡單大方的表格之中。所有的外觀設計全部都在 CSS 設計檔之中，主要的就是以絕對定位的方式來做，可以將一張圖片放大供使用者瀏覽，然後再放回原處就像是使用者拿起來看的感覺，主要是利用瀏覽器的圖片縮放的能力作用的是容器的大小。

jBox 網頁對話方塊

jBox 是能夠幫您在建置網站的時候，輕鬆地建立對話視窗的一個套件。套件本身建立於 jQuery 框架之下，能夠在警告框和確認框中顯示任意的 HTML 內容包括：文字、圖片和影片等等。對於對話確認之後還有提供回調的方法。 jBox 也支援從其他的 URL 來取得內容，它的外觀介面漂亮而且也可自行訂製不透明度、寬度、提供兩個 skin 供開發者選擇、可拖曳和是否關閉等等的參數設定。

jQuery 框架與 CSS3 的結合

使用 jQuery 框架和 CSS3 建立的 3D 動態幻燈效果，範例中建立一個三維動態的滑塊效果所帶來新的轉換功能，用於建立滑塊 CSS 動態調整長條圖的大小，可讓使用者自行調整也可用於調整設定時的動態顯示，讓資料修改也變得不無趣。

jQuery.Showcase 展示櫃

jQuery.Showcase 簡單容易使用而且強大的圖片展示櫃套件，基於 jQuery 框架開發易於選擇網頁元素內容。支援 FireFox 3.5+、Apple Safari 4.0.4+、Opera 10.10+、IE 7+、Google Chrome 3.0.195+。因為以圖片為主所以最適合拿來做為內部的廣告連結刊登，又大又明顯又可以多筆資料顯示於網頁上，增加使用者對產品的印象。