PROLOGUE

有關本書

本書的版面結構



第1章　jQuery Plugin的概要

001 有關jQuery與jQuery Plugin

002 使用外掛套件的注意事項

003 外掛套件無法順利執行時的處理



第2章　顏色� Color

004 顯示檢色器

　　ONEPOINT 顯示檢色器的外掛套件「ColorPicker」

005 顯示固定色的檢色器

　　ONEPOINT 從固定色選取顏色的外掛套件「iColor Picker」

006 顯示色環檢色器

　　ONEPOINT 利用色環選取顏色的外掛套件「Farbtastic Color Picker」

007 選取漸層色

　　ONEPOINT 選取漸層色的外掛套件「GRADX」

008 利用簡單的檢色器選取特定顏色

　　ONEPOINT 選取特定顏色的外掛套件「Really Simple Color Picker」

009 利用簡單的檢色器選取特定顏色或任意色

　　ONEPOINT 外觀簡單但功能豐富的檢色器「 Simple Best jQuery Color Picker」

010 以檢色器選取特定顏色

　　ONEPOINT 可透過檢色器選取特定色的外掛套件「Jquery small color picker」

011 顯示色票顏色

　　ONEPOINT 顯示色票顏色的外掛套件「jQuery Swatches」



第3章　地圖

012 顯示Google地圖?

　　ONEPOINT 顯示Google地圖的外掛套件「initmap.js」

013 顯示Google地圖?

　　ONEPOINT 可輕易顯示Google地圖的外掛套件「jQuery Google Maps」

014 顯示指定地點的位置

　　ONEPOINT 利用地理編碼顯示地圖的外掛套件「jquery.gmap3」

015 將地圖做為一張圖片顯示

　　ONEPOINT 輕鬆產生靜態地圖的外掛套件「Static-google-Maps」

016 顯示SVG格式的地圖

　　ONEPOINT 顯示SVG格式地圖的外掛套件「jQuery Mapael」

017 顯示指定樣式的地圖

　　ONEPOINT 以自訂樣式顯示Google地圖的外掛套件「Maplace」

018 顯示世界地圖

　　ONEPOINT 顯示世界地圖的外掛套件「jQuery Vector Maps」

019 顯示日本地圖



第4章　通知�表單

020 顯示簡單的通知訊息

　　ONEPOINT 可顯示簡單通知訊息的外掛套件「Easy Notification」

021 顯示帶有圖示的通知訊息

　　ONEPOINT 顯示帶有圖示通知訊息的外掛套件「jNotifier」

022 顯示覆蓋層通知訊息

　　ONEPOINT 於覆蓋層顯示通知訊息的外掛套件「jNotify」

023 顯示類似Android OS的通知訊息

　　ONEPOINT 可顯示類似Android OS通知訊息的外掛套件「jquery-toastmessage」

024 顯示通知訊息

　　ONEPOINT 顯示通知訊息的外掛套件「messenger」

025 於畫面上方的通知列顯示通知訊息

　　ONEPOINT 於通知列顯示訊息的外掛套件「Notify Bar」

026 於指定位置顯示通知

　　ONEPOINT 可指定通知位置的外掛套件「noty」

027 於表單元素顯示提示

　　ONEPOINT 顯示提示資訊的外掛套件「jQuery formHelp」

028 統一選擇日期與時間

　　ONEPOINT 能統一選擇日期與時間的外掛套件「jquery.filthypillow」

029 即時顯示輸入的字元數

　　ONEPOINT 即時顯示可輸入字元數的外掛套件「jQuery Max Length」

030 裝飾選單

　　ONEPOINT 裝飾選單的外掛套件「jQuery Selectric」

031 設定一致性的表單UI

　　ONEPOINT 統一表單UI設計的外掛套件「Formplate」



第5章　圖片

032 比較兩張圖片?

　　ONEPOINT 能同時比較兩張圖片（Before � After）的外掛套件「Twenty Twenty」

033 比較兩張圖片?

　　ONEPOINT 比較兩張圖片的外掛套件「covering-Bad」

034 帶有特效的滑鼠移入

　　ONEPOINT 帶有特效的滑鼠移入的外掛套件「Adipoli」

035 帶有縮放特效的圖片顯示�隱藏

　　ONEPOINT 帶有縮放特效的圖片顯示�隱藏的外掛套件「betterToggle」

036 將圖片裁切為指定的尺寸

　　ONEPOINT 依照指定尺寸裁切圖片的外掛套件「Cropping Images」

037 讓圖片呈菱形顯示

　　ONEPOINT 讓圖片呈菱形顯示�排列的外掛套件「diamonds」

038 滑鼠移入時縮放圖片

　　ONEPOINT 滑鼠移入時放大圖片的外掛套件「EasyZoom」

039 依照容器尺寸顯示圖片

　　ONEPOINT 依照容器尺寸顯示圖片的外掛套件「imgLiquid」

040 將圖片配置於元素整體

　　ONEPOINT 讓圖片隨元素大小調整尺寸的外掛套件「Wallpaper」

041 以畫線方式選取圖片

　　ONEPOINT 以繪製線條的方式選取圖片的外掛套件「Wrangle」

042 讓圖片彈跳顯示

　　ONEPOINT 讓圖片如Lightbox風格般彈跳顯示的外掛套件「Facebox」

043 放大圖片

　　ONEPOINT 讓圖片放大顯示的外掛套件「Fancyzoom」

044 點選縮圖顯示大圖

　　ONEPOINT 點選縮圖顯示大尺寸圖片的外掛套件「least.js」

045 點選縮圖顯示放大圖片

　　ONEPOINT 點選縮圖顯示放大圖片的外掛套件「Magnific Popup」

046 顯示對應容器大小的圖片

　　ONEPOINT 支援各種圖片尺寸的外掛套件「jQuery Picture」

047 依容器尺寸調整對應可點選式地圖的座標

　　ONEPOINT 依照圖片尺寸自動調整對應座標的外掛套件「RWD Image Maps」

048 顯示高解析度裝置專用的圖片?

　　ONEPOINT 支援高解析度裝置的外掛套件「Dense.js」

049 顯示高解析度裝置專用的圖片?

　　ONEPOINT 支援高解析度裝置的外掛套件「imgRetina」

050 顯示高解析度裝置專用的圖片?

　　ONEPOINT 支援高解析度裝置的外掛套件「jQuery Retina」

051 套用漣漪效果

　　ONEPOINT 能套用漣漪效果的外掛套件「jQuery Ripples」



第6章　全螢幕顯示�幻燈片播放

052 於全螢幕顯示幻燈片

　　ONEPOINT 於全螢幕模式顯示幻燈片的外掛套件「Backstretch」

053 於全螢幕顯示圖片

　　ONEPOINT 於全螢幕模式下顯示圖片的外掛套件「Fullscreen Background」

054 於全螢幕模式播放幻燈片?

　　ONEPOINT 能於全螢幕模式播放幻燈片的外掛套件「MaxImage」

055 於全螢幕模式播放幻燈片?

　　ONEPOINT 能於全螢幕模式下播放幻燈片的外掛套件「Supersized」

056 如百葉窗般讓圖片滑入顯示

　　ONEPOINT 能以百葉窗方式顯示圖片的外掛套件「Blindify」

057 圖片自動滑入顯示

　　ONEPOINT 可讓圖片滑入顯示的外掛套件「blueimp Gallery」

058 智慧型手機亦可使用的滑動式幻燈片播放模式

　　ONEPOINT 智慧型手機亦可使用的幻燈片外掛套件「bxsilder」

059 以群組為單位播放幻燈片

　　ONEPOINT 將圖片整理成群組，再以幻燈片模式播放的外掛套件「Colorbox」

060 可進階設定的幻燈片播放

　　ONEPOINT 能進階設定的幻燈片播放外掛套件「Fancybox2」

061 能以各種方式播放圖片的幻燈片

　　ONEPOINT 預設各種顯示格式的幻燈片播放程式「FlexSilder」

062 以拖曳�觸控操作讓圖片滑動播放

　　ONEPOINT 支援智慧型手機觸控操作的外掛套件「Fotorama」

063 依照元素寬度滑動顯示圖片

　　ONEPOINT 依照元素寬度滑動顯示圖片的外掛套件「Full Width Image Slider」

064 以磁磚樣式配置幻燈片的縮圖

　　ONEPOINT 能將縮圖配置成磁磚樣式的外掛套件「Galereya」

065 播放附有縮圖的幻燈片

　　ONEPOINT 能播放多功能幻燈片的外掛套件「Galleria」

066 顯示支援jQuery Mobile的幻燈片播放程式

　　ONEPOINT 支援jQuery Mobile的幻燈片播放外掛套件「ImageFlip」

067 將背景圖片重疊於圖片下方，並且讓圖片自動滑動顯示

　　ONEPOINT 附有背景圖片並且能讓圖片滑動顯示的外掛套件「Immersive Slider」

068 讓圖片平順地滑動（轉盤模式）

　　ONEPOINT 能套用轉盤模式的外掛套件「jCarousel」

069 使用自訂遮罩的滑動顯示

　　ONEPOINT 支援響應式設計並且可使用自訂遮罩圖片的外掛套件「Juicy Slider」

070 不需指令檔讓圖片滑動顯示

　　ONEPOINT 不需指令檔就能讓圖片滑動顯示的外掛套件「Lightbox 2」

071 可指定各種主題的幻燈片播放

　　ONEPOINT 可指定各種主題的幻燈片播放外掛套件「Nivo Slider」

072 利用CSS3的動畫特效滑動顯示圖片

　　ONEPOINT 可利用CSS3動畫特效播放幻燈片的外掛套件「Photo Stack」

073 酷炫地播放幻燈片

　　ONEPOINT 利用CSS3播放幻燈片的外掛套件「Photobox」

074 能將照片上傳Twitter的幻燈片播放

　　ONEPOINT 能將幻燈片圖片上傳至Twitter的外掛套件「prettyPhoto」

075 播放支援響應式設計的幻燈片

　　ONEPOINT 支援響應式設計的外掛套件「Slippry」

076 播放垂直方向的幻燈片

　　ONEPOINT 擁有各種功能的外掛套件「Sly」

077 平滑地水平捲動圖片

　　ONEPOINT 能平滑地捲動圖片的外掛套件「Smooth Div Scroll」

078 同時顯示縮圖與圖片

　　ONEPOINT 同時顯示縮圖並顯示放大圖片的外掛套件「SuperBox」

079 背景滑動顯示

　　ONEPOINT 讓背景圖片滑動顯示的外掛套件「Vegas Background」

080 縮放處理與相簿顯示模式執行

　　ONEPOINT 能縮放圖片與切換成相簿顯示模式的外掛套件「Zoombox」



第7章　頁面

081 將標題轉換成導覽列

　　ONEPOINT 能將標題元素轉換成導覽列的外掛套件「Anchorific.js」

082 依照頁面捲動調整元素位置

　　ONEPOINT 捲動頁面時調整元素樣式與固定元素位置的外掛套件「Auto Fix Anything」

083 顯示大型註釋

　　ONEPOINT 可顯示註釋的外掛套件「Bigfoot」

084 折疊�展開段落

　　ONEPOINT 折疊�展開段落的外掛套件「jQuery More」

085 將標題轉換成導覽列做為側邊選單

　　ONEPOINT 能自動建立導覽列，並將導覽列轉換成側邊選單的外掛套件「Jump To」

086 滑動顯示頁面

　　ONEPOINT 可滑動顯示頁面的「Liquid Slider 2」

087 進入 Viewport 時顯示元素

　　ONEPOINT 在 Viewport 範圍內/外執行不同處理的外掛套件「onScreen」

088 讓元素如紙張般折疊

　　ONEPOINT 可折疊元素的外掛套件「OriDomi」

089 顯示自動移到頁面頂端的按鈕或連結

　　ONEPOINT 能自動新增回到頁面頂端的外掛套件「ScrollUp」

090 依每個區塊分割頁面

　　ONEPOINT 依每個區塊分割頁面的外掛套件「simplePgaination.js」

091 依頁面捲動量改變CSS設定

　　ONEPOINT 依照捲動量改變CSS設定的外掛套件「skrollr」

092 平滑地捲動頁面

　　ONEPOINT 不需指令檔就能平滑地捲動頁面的外掛套件「smoothScroll」 316

093 可動態調整的格狀版面

　　ONEPOINT 可動態調整格狀版面的外掛套件「vgrid」



第8章　文字

094 沿曲線配置文字

　　ONEPOINT 沿曲線或圓形配置文字的外掛套件「Circle Type」

095 依照元素大小調整文字

　　ONEPOINT 依照視窗大小調整文字大小的外掛套件「FitText」

096 即時限制輸入格式

　　ONEPOINT 即時限制輸入格式的外掛套件「formatter.js」

097 讓文字隨機滑動

　　ONEPOINT 讓文字套用滑動特效的外掛套件「funnyText.js」

098 自動將文字內的網址轉換成URL

　　ONEPOINT 將http開頭的字串自動轉換成URL的外掛套件

099 將部分文字塗黑

　　ONEPOINT 可將文字塗黑的外掛套件「jQuery Monta-method」

　　COLUMN 以Zepto.js執行依照元素尺寸調整文字

100 依照元素尺寸調整文字

　　COLUMN 可依照元素尺寸調整文字的外掛套件「Responsive Text」

101 將數字轉換成七節式的液晶樣式

　　ONEPOINT 將數值轉換成七節式的液晶樣式外掛套件「sevenSeg.js」

102 指定文字的動態特效

　　ONEPOINT 指定顯示與消失時的特效的外掛套件「Textillate.js」

103 指定文字輸入（打字）特效

　　ONEPOINT 重現顯示打字特效的外掛套件「t.js」

104 文字字距（縮排）

　　ONEPOINT 調整文字間距的外掛套件「jQuery.Kerning.js」

　　COLUMN 圖表函式庫



第9章　選單

105 顯示巨型選單

　　ONEPOINT Adobe公司提供的選單外掛套件「Accessible Mega Menu」

106 顯示內容選單

　　ONEPOINT 顯示內容選單的外掛套件「jQuery contextMenu」

107 顯示圓形選單

　　ONEPOINT 沿圓形排列選單項目的外掛套件「Ferro Menu」

108 顯示側邊選單

　　ONEPOINT 顯示側邊選單的外掛套件「mmenu」

109 顯示多階層側邊選單

　　ONEPOINT 能顯示多階層側邊選單的外掛套件「Multi-Level Push Menu」

110 滑動顯示選單

　　ONEPOINT 顯示滑動選單的外掛套件「Sidr」

111 捲動頁面時固定選單位置

　　ONEPOINT 於頁面捲動時固定選單位置的外掛套件「SMINT」

112 固定選單位置

　　ONEPOINT 固定選單位置的外掛套件「stickUp」



第10章　其他

113 讓圖片呈立方體旋轉

　　ONEPOINT 讓圖片呈立方體旋轉的外掛套件「Image Cube」

114 以微縮模型照片的風格顯示圖片

　　ONEPOINT 以微縮模型照片風格顯示圖片的外掛套件「tiltShift」

115 視需求延遲載入顯示圖片

　　ONEPOINT 延遲載入圖片的外掛套件「jQuery Lazy Load」

116 視需求延遲載入圖片（支援高解析度顯示裝置）

　　ONEPOINT 支援高解析度顯示裝置的延遲載入外掛套件「Unveil」

117 以撥盤操作變更值

　　ONEPOINT 以撥盤操作的外掛套件「jQuery Knob」

118 響應式表格

　　ONEPOINT 建立響應式表格的外掛套件「ReStable」

119 依數值裝飾表格

　　ONEPOINT 依照表格內數值裝飾表格的外掛套件「jQuery Table ColorScale」

120 將YouTube做為背景影片播放

　　ONEPOINT 於背景播放影片的外掛套件「mb.YTPlayer」

121 於背景進行影片播放處理處理

　　ONEPOINT 於背景執行影片撥放處理的外掛套件「Video Backgound」

122 於背景模式全螢幕播放YouTube的影片

　　ONEPOINT 於全螢幕模式播放YouTube影片的外掛套件「jQuery tubular」

123 讀寫Cookie

　　ONEPOINT 讀取Cookie 的外掛套件「jquery.cookie」

124 產生QR Code

　　ONEPOINT 產生QR Code的外掛套件「jQuery.qrcode」

　　COLUMN 關於QR Code

125 繪製圖表

　　ONEPOINT 能繪製各種圖表的外掛套件「jqPlot」

索引 421