­
10月 2012 - A-Fu Design

Growl 可以創建淡入淡出的提示訊息效果

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

Continue Reading

jQuery powerFloat 多用途的浮動下拉選單套件

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

Continue Reading

Spin.js 無圖片的讀取中樣式.支援 IE6 以上版本

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

Continue Reading

ExColor 是一個類似於 PhotoShop 的顏色選擇器

上午11:23 / BY Fu
ExColor 實際執行畫面 ExColor 是一個 jQuery 的套件用於創建一個類似於 PhotoShop 的顏色選擇器,他附加在 input 的元素上,透過一個簡單的函示就能夠調用顏色選擇器。顏色選擇器中的每一個元素都設計得非常的靈活,自帶有十種不同的設計選項供開發者選擇。 ...

Continue Reading

xmlObjectifier 簡單地把 XML 內容轉化成 JSON 格式

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

Continue Reading

liteAccordion 讓你快速創建一個吸引人的水平折疊選單

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

Continue Reading

Joyride 建立一個使用者網站功能操作導覽

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

Continue Reading

jQuery Collapse 是一個輕量級的折疊式選單套件

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

Continue Reading

Grumble.js 可產生一個球形的提示氣泡訊息

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

Continue Reading

ImageSelect 把下拉式選單加入圖片了- 基於 jQuery

上午10:20 / BY Fu
ImageSelect 實際執行畫面 如果在設計網頁時,需要使用者選擇某一個圖片大部分的設計師都會選擇使用 radio 的表單元素來使用,但是如果有大量資料的話又會佔用了很多的空間,那就來試試這一個基於 jQuery 框架開發的 ImageSelect 把圖片放進 select 的表單元素之內。 ...

Continue Reading

Sweet Tooltip 以 CSS3 和 jQuery 為基礎的提示訊息

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

Continue Reading

Flipping Image Gallery 讓照片像拿在你手上的效果

上午11:46 / BY Fu
Flipping Image Gallery 實際執行畫面(最上一張抽離中) 這個套件利用 CSS 的 z-index 屬性和 jQuery 框架實現的一個非常獨特的 Image Gallery,讓使用者有拿著圖片看的感覺,動畫向上抽走一張放到最下層,或者是在最下層抽走一張在移動到最下層,就像實際拿著一疊照片觀看的感覺。 ...

Continue Reading

PikaChoose 簡單漂亮的幻燈片圖片套件

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

Continue Reading

Flexible Nav 類似網頁書籤或檔案目錄的功能

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

Continue Reading

Fixed Fade Out Menu 置頂會淡出的導航選單

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

Continue Reading

好看又時尚的網頁選單滑鼠滑過會有特別的效果

上午8:26 / BY Fu
A Stylish Navigation Menu With jQuery 執行畫面 正如你可能知道,一個新的訪問者與網站互動的第一個20秒的確定它們是否要留下或者離開。這意味著你必須遵循共同的設計手法,把網頁做成使用者喜歡的樣式。這個是一個簡單又時尚的 CSS + XHTML 的導航選單 基於 jQuery 框架完成。 ...

Continue Reading

jQSlickWrap 不規則圖片的文繞圖模式

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

Continue Reading

Fly Off Page 讓使用者把不要的的網頁元素飛出網頁中

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

Continue Reading

類似 Mac OS X 系統選單的選單效果 - 基於 jQuery

上午11:47 / BY Fu
iconDock 實際執行畫面 iconDock 是基於 jQuery 框架下的一個套件,可以創建類似 Mac OS X 系統選單的網頁選單效果,圖標可添加對上下文有幫助的提示文字。適用於近代所有瀏覽器瀏覽。 ...

Continue Reading

NotesForLightBox 圓角撥放的燈像套件 - 基於 jQuery

晚上11:51 / BY Fu
NotesForLightBox  實際執行畫面 NotesForLightBox 是一個 jQuery 的套件簡單容易使用,可覆蓋過當前頁面的圖片和內容,這是一個可以設置和適用於所有的現代瀏覽器,圓角播放的燈箱還有擁有導航的按鈕和幻燈片播放功能還有幻燈片顯示進度條。 ...

Continue Reading

LeaveNotice 離開你的網站的提醒視窗 - 基於 jQuery

晚上10:22 / BY Fu
LeaveNotice 實際執行畫面 LeaveNotice 是一個 jQuery 的套件,方便的通知您網站的使用者離開您的網站,以確保讓用戶知道他正要連結到部屬於您的網站區域中。就像是 Yahoo 部落格一樣離開網站連結的時候出現的視窗。 ...

Continue Reading

類似 Facebook Like Box 的 Twitter 版本 - 基於 jQuery

下午5:16 / BY Fu
Twitter Follow Box 實際執行畫面 可以在你自己的網站顯示 Twitter 的跟隨者數量及跟隨連結,就跟 Facebook 的社群套件一樣(Social Plugin Like Box),可自定義顏色大小以配合您的網站設計。 ...

Continue Reading

Adipoli hover 圖片滑鼠事件動畫效果 - 基於 jQuery 框架

下午3:34 / BY Fu
Adipoli 實際執行畫面 Adipoli 一個簡單的 jQuery 套件,讓網站的圖片更有時尚新穎的效果,設計上有用到 HTML5 的技術所以舊式的瀏覽器並不支援。 ...

Continue Reading

HTML5 Canvas 可放大縮小拖曳並且會出圖片的工具套件

下午2:26 / BY Fu
 Canvas Photo Experiment HTML5 Canvas 實際執行畫面 可自由和輕鬆的旋轉和縮放圖片,圖片來源高度自由導入導出不同的圖片格式,並且可為圖片加上邊框或任何的CSS設計,圖片的匯出主要使用到 HTML5 的 Canvas 的網頁元素,支援大部分近代的瀏覽器。 ...

Continue Reading

類似 Facebook 搜尋的樣式的提示搜尋 - 基於 jQuery

晚上7:27 / BY Fu
實際執行畫面 類似 Facebook 搜尋的樣式的提示搜尋,使用 jQuery 框架 AJAX 非同步搜尋資料,高速的使用者端緩存方式。 ...

Continue Reading

讓你的網頁元素可以拖曳並且可以調整大小 - 基於 jQuery 框架

下午4:33 / BY Fu
jqDnR 可拖曳及調整大小 實際執行畫面 jqDnR 是一個輕量級的一個 jQuery 套件,可以讓您的網頁元素可以拖曳並且可以調整元素的大笑,可定義可放大元素的作用區域,也可支援半透明的拖動方式。 ...

Continue Reading

讓你的網頁能更使用鍵盤簡化操作步驟 - 基於 jQuery

下午1:38 / BY Fu
jQuery hotkeys 實際執行畫面 鍵盤熱鍵套件簡化網頁事件的操作步驟,可以讓您可以輕鬆的添加或移除熱鍵,在你的網頁任什地方幾乎都能夠支援組合鍵的鍵盤事件,jQuery hotkeys 基於 jQuery 框架開發簡化網頁元鍵操作擴充性大。 ...

Continue Reading

Moving Boxes 內容輪播套件 - 基於 jQuery 框架

上午11:05 / BY Fu
Moving Boxes 實際執行畫面 Moving Boxes 是一個 Content Slider jQuery 套件,提供按鈕控制內容面板的變化放大縮小,內容面板的數量和初始化大小與寬度都是可以利用參數控制,還可以支元使用鍵盤的導航鍵來控制面板內容的更換。 ...

Continue Reading

圖片幻燈片展示效果.非常輕量級的一個套件

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

Continue Reading

jRating 非常靈活的 Ajax 星級評等系統 - 基於 jQuery 框架

晚上9:42 / BY Fu
jRating 星級評等系統實際執行畫面 jRating 是一個非常靈活的 jQuery 套件可快速創建AJAX的星級評等系統,這是可以配置很多種功能細節的套件,也可以更改顯示的大或小的星星圖像,jRating 也可以使用任何的伺服器端語言來記錄使用者選擇。 ...

Continue Reading

Control.ProgressBar 百分比的進度條 - 基於 Prototype 框架

晚上8:42 / BY Fu
Control.ProgressBar 百分比進度條實際執行情形 Control.ProgressBar 是一個基於百分比的進度條,可以設置為固定時間間隔執行程式或者是手動設置進度條進度,只需要建立一個DIV相對或者絕對位置,將 JavaScript 設置內部元件的寬度等等。 ...

Continue Reading

jQuery PassWord Strength 密碼強度檢測套件

下午6:05 / BY Fu
密碼強度檢測工具實際執行畫面  jQuery password strength meter 套件能用在註冊時就先檢查密碼的強度,現在很多網站都有會員機制,很多人怕密碼會忘記或是偷懶都會用一些很簡短簡單的密碼,這樣就讓其它惡意的使用者就有機可趁,這也讓網站的管理者很頭大。 ...

Continue Reading

簡單又強大的 lightBox - 基於 jQuery 框架開發

下午4:16 / BY Fu
jQuery lightBox 套件實際執行情形 jQuery lightBox 套件是一個簡單容易使用,可覆蓋過當前頁面的圖片和內容,運用 jQuery 框架開發擁有更強大的靈活性。 ...

Continue Reading

jQuery Pagination AJAX 的分頁套件 - 基於 jQuery 框架設計

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

Continue Reading

iCarousel 旋轉燈籠式圖片展示套件 - 基於 Mootools 框架

上午10:09 / BY Fu
iCarousel 旋轉燈籠式圖片展示實際執行畫面 Web 開發人員常會遇到很多的連續內容需要展示,有可能是一些文章片段也有可能是一堆圖片等等的,因為有這樣的需求,所以就出現了旋轉方式的展示方式,這一個套件就是幫助開發者擁有豐富的展式介面且容易使用的方法。 ...

Continue Reading

Colour Picker 2.0 簡單易用的顏色選擇器 - 基於 jQuery 框架

凌晨12:00 / BY Fu
Colour Picker 2.0 實際執行畫面 Colour Picker 2.0 此套件會再一個 SELECT 元素中填充顏色,把顏色以顏色的小方盤呈現可自定義色彩,簡單容易使用檔案更只有1KB而已。 ...

Continue Reading

ContextMenu 瀏覽器字定義右鍵選單 - 基於 jQuery 框架

晚上8:58 / BY Fu
ContextMen 實際執行畫面 ContextMen 是一個輕量級的 jQuery 套件,可以讓你有選擇性的重寫瀏覽器的右鍵選單功能,並且能夠自定義右鍵選單的內容。 ...

Continue Reading

jQZoom 可局部放大圖片某一個部分的 jQuery 套件

晚上7:19 / BY Fu
jQZoom 實際執行畫面 jQZoom 是一個  JavaScript 的圖片放大鏡基於 jQuery 框架之下,jQZoom 可放大你想放大的地方一個簡單而容易使用的套件。 ...

Continue Reading

方便簡潔的一個表單資料驗證套件 - 基於 Mootools 框架

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

Continue Reading

置於網頁最頂端的可延展選單 - 基於 Prototype 框架

下午5:56 / BY Fu
選單實際執行畫面 e24TabMenu 是一個可置於網頁最頂端滑動可展示簡介內容的一個套件,選單可以平穩的展開與收縮。 ...

Continue Reading

Curl.js 為您的網站圖片增加捲曲效果

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

Continue Reading

Flot 統計圖表繪製套件 - 基於 jQuery 框架開發

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

Continue Reading

讓影片連結以 Lightbox 方式顯示播放 - 基於 Mootools 框架

上午10:51 / BY Fu
Videobox 實際執行情形 Videobox 是一個只有6KB大小的套件,可以讓影片連結以 Lightbox 方式顯示播放,Videobox 使用 swfobject 來嵌入 Flash 。 影片可以來自 Youtube、Metacafe、Google Video、iFilm和自己設置的Flash。 ...

Continue Reading

jqUploader 擁有上傳進度的上傳套件 - 基於 jQuery 框架

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

Continue Reading

簡單的 DatePicker 工具 不依賴任何一個框架

下午5:17 / BY Fu
Date Input Calendar 實際執行畫面 Jason's Date Input Calendar 是專為減化輸入到表單中的日期值,支持多種日期格式,方便簡單使用不需載入框架檔案直接就可以使用,支持大部分的瀏覽器 IE6+、FireFox、Chrome、Opera。 ...

Continue Reading

讓文章的關鍵字或標籤高亮顯示 - 基於jQuery 框架

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

Continue Reading

可以讓網頁上大部份元素都變成可拖曳的元件

下午3:28 / BY Fu
EasyDrag 實際執行畫面 EasyDrag 這一個套件可以讓大部分的 DOM 元素都可以有拖曳的功能,基於 jQuery 框架撰寫套件的體積很精巧,主要就是拖曳和拖曳後可使用回調函式來讓程式做下一個要執行的事情。 ...

Continue Reading

頁面表格排列類似Office Excel 的方式呈現 - 基於jQuery 框架

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

Continue Reading

直式的折疊式選單套件 Accordion -基於Mootools框架製作

下午2:01 / BY Fu
實際執行畫面 極為精簡摺疊選單套件,僅僅使用到 Mootools 框架本身並沒有多出很多的 JavaScript 的程式碼,如果沒有需要用到很多功能的使用者可以使用這一個套件,基本的折疊顏色的更換都是很完美的表現出來。 ...

Continue Reading

基於jQuery 框架的顏色選擇套件 - Farbtastic Color Picker

下午1:29 / BY Fu
Farbtastic Color Picker 實際執行畫面 Farbtastic Color Picker是一個jQuery套件,可以添加一個或多個顏色選擇器窗口小部件到一個頁面透過JavaScript。每個窗口小部件,然後連接到一個現有的元素(例如,一個文本字段),選擇一種顏色時,將更新該元素的值。 ...

Continue Reading