進入新章節 371

jQuery UI10

妝乎水水

W e b 的 生 死 倚 靠 著 使 用 者 和 他 們 的 資 料。從使

用者那裡收集資料是一件大事，而且對 W e b 開發者來說可能

是一項耗時費力的挑戰。你已經看過 j Q u e r y 如何協助你，讓

A j a x、P H P 和 M y S Q L 的 We b 應用程式更有效地運作。現在，

讓我們檢視一下 j Q u e r y 如何幫助我們建造使用者介面 — 從使

用者那裡收集資料的表單。在整個過程中，你將適切地學習到

jQuery UI， jQuery 使用者介面的官方程式庫。

我 喜 歡 你 的 表 單，

要 不 要 到 我 那 兒 一

起試試？

咻…希望它能夠

通過你的驗證…

372 第十章

妝乎水水

Pattersby 和 Gimli 博士致力於從全球各地收集神秘生物觀察事件（ cryptid sighting），他們的網站，cryptozoologists.org，受到全世界專業及業餘神秘生物調查人員（ cryptozoologist）的崇敬。兩位博士有一項工作要委託你︰更新他們的過時且老舊的 Cryptid Sightings（神秘生物觀察）表單。

Cryptid（神秘生物）是指科學社群

未知或未承認的生物，從全球各地

的使用者那裡收集寶貴資料對我們

的研究工作可說是至關重要。

一些著名的神秘生物，包括喜馬拉雅

山雪怪（Yeti），尼斯湖水怪（Loch

Ness Monster），大腳怪（Bigfoot），

南美吸血怪（chupacabras）等等，我

們需要用更好的表單來收集人們在何

時及何地看見它們的相關資訊。

Cryptozoologists.org 需要大翻修

但願我能夠擺脫

狗仔的糾纏﹗

Dr. Gimli

Dr. Pattersby

?

?神秘生物調查人員們想要告別過時且

難用的舊 HTML 表單。

舊表單的外觀與感覺根本不

吸引人，看起來就像 90 年

代末期的產物。Submit Your Cry

ptid Sighting

Please report the det

ails of your crytpid sig

hting below along w

ith

your contact informa

tion.

Fill out the form belo

w and click "Enter" to

Submit

Date of Sighting:

Where You Saw the C

reature:

Creature Type:

Describe Creature:

Observer First Name:

Observer Last Name:

Observer email:

Submit Your Sighting

Data:

ReptileMammal

Bird

沒什麼視覺效果可以輔助使用者輸入品質良好的資料，HTML 程式碼也沒有提供足夠的選項，結果，兩位博士收集到一堆垃圾資料。

目前位置 4 373

jquery ui

為你的 HTML 表單牽線

提交你的神秘生物觀察事件（Submit Your Cryptid Sighting）

神秘生物觀察資料

觀察日期： 生物類型︰

你與該生物的距離(以呎為單位作估計)︰

生物重量︰

生物高度︰

生物的顏色（獸皮/毛皮/覆蓋物）︰

觀察位置資料

觀察位置的緯度︰

觀察位置的經度︰

輸入你的觀察資料︰

月

在目前的表單中，這是文字欄位

，那會

讓我們得到各式各樣亂七八糟的

資料，

我們想讓使用者從彈出日曆中挑

選日期，

以便獲得格式正確的日期資料。

我們想讓使用者

透過點擊及拖曳

來輸入數值資料，

以便獲得更精確

的資料，使用者

也更容易操作。

是否能夠讓這個按鈕看起來漂亮些？在目

前的表單中，這個按鈕的死板模樣讓我們

的網頁有一種過時的感覺。

這裡安排一個顏色混合器如何？

RGB

在目前的表單中，我們使用的是選鈕（radio button）；

能不能把它弄得更吸引人呀？哺乳動物

輸入

下面草圖說明神秘生物調查人員們想要的新表單外觀，伴隨一些額外的說明。

神秘生物調查人員們在這裡提出一個嚴苛的要求，他們要你建造一

個如桌面應用程式般的使用者介面，你認為 jQuery 是否能提供什麼來幫忙完成這項任務？

374 第十章

妝乎水水

JimFrank Joe

Frank：看到了，當前的表單是 HTML 表單，但是 HTML 和CSS 無法完成神秘生物調查人員們想要的新表單。

Jim：沒錯！你曾經試過用 CSS 賦予表單元素樣式嗎？我寧可接受牙根管治療啊！

Frank：是呀，還有 jQuery⋯嗯，我沒有看過 jQuery 裡有什麼東西可以幫助我們建造那樣的介面元件。

Joe：我們必須想想辦法，人們習慣使用那樣的酷炫元件，我們必須設法建造它們。

Frank：我們或許需要結合 JavaScript、jQuery 和 CSS，才能把這件事給搞定。

Jim：那可是有很多程式邏輯需要撰寫啊，單單他們想要的彈出日曆就不知道要撰寫多少行程式碼，更何況那一堆複雜的 CSS。

Joe：嗯，事實上，可能有 jQuery 插件（plug-in）能夠處理這類工作喔。

Jim：插件，啊，沒錯﹗我們在幾章之前曾經使用過一個，為 Bit to Byte 競賽結果網頁建立頁籤，那麼說，或許還有其他適合用在這裡的插件，嘿嘿嘿？

Joe：是的，如果 jQuery 未提供某個開發者需要的東西，該開發者可以建造插件，並且把它釋出給 jQuery 社群使用，這樣就可以為其他開發者節省大量時間。

Jim：所以某些開發者或者開發團隊可能已經處理過這件事囉？

Frank：那真的會幫我們一個大忙。

Joe：讓我們搜尋一下 jQuery.com，看看能不能找到什麼神兵利器。

大 伙 兒 有 沒 有 看 到 "Submit Your

Cryptid Sighting"（提交你的神秘生物

觀察事件）表單的草圖？

目前位置 4 375

jquery ui

如果有什麼好康的 jQuery 介面

插件可利用，而不用一個人咬著牙

孤獨地面對未來，那該多好！或許

這只是我的幻想吧…

376 第十章

妝乎水水

用 jQuery UI 減少編程工作的頭痛問題（與時間）還好，針對所有的開發者，jQuery 有一個使用者介面插件的官方程式庫可用來解決這類專案的問題，該程式庫叫作 jQuery UI，並且提供三種主要類型的jQuery 核心插件︰特效（effect），互動（interaction）及小組件（widget）。

小組件插件互動插件特效插件

jQuery UI 透過增加更多特效來擴充 jQuery 的功能，讓你的元素彈跳，爆炸，脈動

或 振 動。jQuery UI 也 包 括easing function（補間動畫函式）— 讓動畫看起來更符合實際的複雜數學運算。

互動為 Web 應用程式增添更複雜的行為，你可以透過讓元素

變成可拖曳、可丟棄或者可排

列（僅列出幾個例子），而讓

使用者能夠更流暢地與之互動。

Web 小組件是一種自我完備（self-contained） 的 元 件， 為你的Web應用程式添加功能性，幫你節省大量的編程時間和複

雜性，同時建立可用且具回應

性的使用者介面元素。

透過以下的 URL，並且遵循對應的指示，試用看看 jQuery UI 的幾個特效，互動和小組件。

URL 指示

http://jqueryui.com/demos/animate/#default 點擊Toggle Effect按鈕。http://jqueryui.com/demos/effect/default.html 從下拉選單選擇特效，然後點擊 Run Effect。

http://jqueryui.com/demos/draggable/#default 點擊並且按住 "Drag me around"的方框，接著拖曳你的滑鼠，在指定的畫面區域中移動方框。

http://jqueryui.com/demos/accordion/#default 點擊各節說明，看看折疊特效（Accordion）【譯註】

的開展與收折。

http://jqueryui.com/demos/dialog/#animated 點擊 Open Dialog 按鈕，看看自訂的 jQuery UI對話框，遠比 JavaScript 那古老、單調的警示方框好多了，不是嗎？

jQuery 提 供 允 許 開 發 者 擴 充jQuery 核心程式庫的插件架構

（plug-in architecture）。測試版

We’re going to focus mostly on widgets for our UI work in this chapter.

4譯註 此特效的開發者將之命名為 Accordion，即手風琴之意，相當有意思！

目前位置 4 377

jquery ui

互動︰提供某元素可拖曳的執柄，

讓使用者縮放它。

小組件︰顯示某事件的當前完成百

分比。

互動︰讓 DOM 元素變成可拖曳元素的目標。

特效︰讓某元素看似擴大並且消散於

透明，像煙一樣。

互動︰讓某元素可透過拖曳來排列。

小組件︰建立可摺疊的交疊區域，以

組織網頁內容。

小組件︰在使用者鍵入輸入欄位時提

供可能值的清單。

Puff （煙消雲散）

Explode （爆炸）

Sortable （可排列）

Progressbar（進度列）

Droppable （可丟棄）

Autocomplete（自動完成）

Blind （隱蔽）

Accordion ( 手風琴摺疊 )

Resizable ( 可縮放 )

特效︰讓某元素看似碎裂並且噴向

幾個方向。

特效︰讓某元素看似滑上或滑上，像

窗戶開闔一樣。

將每個 jQuery UI 插件與它屬於什麼類型以及它在做什麼配成對。提示︰假如你不確定，請再多花點時間於上頁「測試版」

的示範網頁上逛逛。

378 第十章

妝乎水水

解答

互動︰提供某元素可拖曳的執柄，

讓使用者縮放它。

小組件︰顯示某事件的當前完成百

分比。

互動︰讓 DOM 元素變成可拖曳元素的目標。

特效︰讓某元素看似擴大並且消散於

透明，像煙一樣。

互動︰讓某元素可透過拖曳來排列。

小組件︰建立可摺疊的交疊區域，以

組織網頁內容。

小組件︰在使用者鍵入輸入欄位時提

供可能值的清單。

Puff （煙消雲散）

Explode （爆炸）

Sortable （可排列）

Progressbar（進度列）

Droppable （可丟棄）

Autocomplete（自動完成）

Blind （隱蔽）

Accordion ( 手風琴摺疊 )

Resizable ( 可縮放 )

特效︰讓某元素看似碎裂並且噴向

幾個方向。

特效︰讓某元素看似滑上或滑上，像

窗戶開闔一樣。

將每個 jQuery UI 插件與它屬於什麼類型以及它在做什麼配成對。提示︰假如你不確定，請再多花點時間於上頁「測試版」的示範網頁上逛逛。

目前位置 4 379

jquery ui

http://jqueryui.com/download

動手做﹗

把你的瀏覽器指到 jQuery UI 下載頁面︰

選擇想要下載的元件。

為你的下載選擇主題。

在這個專案中，我們只

需要 UI core 與 Widgets，

所以僅選擇這裡所顯示

的項目。

關於 jQuery UI 最好的事情之一就是它的主題（theme）。jQuery UI 開發團隊包含了產生美觀介面所需的一切 CSS，你甚至能夠用 jQuery UI的“theme roller”建立你自己的主題。關於 jQuery UI的所有主題，請參考下列 URL︰

http://jqueryui.com/themeroller/#themeGallery

為你的下載選擇Sunny 主題。

按下 Download 按鈕。

那麼，jQuery UI 已經下載完

成﹗如何開始使用呢？

你只需要解壓縮下載檔案，並且在專案目錄裡

包含該程式庫。

翻到下一頁，讓我們檢視一下 jQuery UI 內部。

用 jQuery UI做任何事之前，必須組態我們想要的元件，選擇主題（theme），並且下載其複本。請遵循下列步驟︰

1

2

3

4

380 第十章

妝乎水水

jQuery UI 套件裡有什麼

我們的專案檢查清單

1. 建造 datepicker，讓使用者輸入觀察日期。

2. 建造更迷人的選鈕，讓使用者選擇生物類型。

3. 建造輸入數值的滑動條，讓使用者輸入與神祕生物間的距離，神祕生物的重量

與高度，觀察地點的緯度和經度。

4. 建造顏色混合器介面元件，讓使用者輸入生物顏色。

5. 建造更美觀的提交按鈕，以交付表單。

在下載及解壓縮 jQuery UI 之後，會發現它的結構如下︰

index.htmldevelopment-bundle

jquery-ui-1.8.16.custom

jquery-1.6.2.min.js

jquery-ui-1.8.16.custom.css

js

jquery-ui-1.8.16.custom.min.js

images

你選擇的主題在

css 目錄下。

在 sightings.html 表單的 head 區段中，我們必須連結到這個檔案，好讓 jQuery UI的小組件看起來正常無誤。

在本書撰寫之際，jQuery UI 的版本為 1.8.16。

我們必須讓 sightings.html 表單的 script 區段連結至此。

jQuery UI 確保你擁有

一版 jQuery 程式庫。

我們已經將 jQuery UI 目錄包含在本書一開始下載的程式碼目錄裡，你可以在ch10 目錄中的 end 目錄裡找到它。

css

sunny

jQuery UI 為你做了很多事，但是我們還有一些專案項目要處理，才能夠建造出新表單。下面是專案待辦事項的檢查清單︰

目前位置 4 381

jquery ui

將日期挑選器建進 sightings 表單

安排一個舊式 HTML 的簡單 input 欄位。

建立指向 jQuery UI 的 標籤。

把 datepicker 的 ID 增加到 標籤。

在你最喜愛的瀏覽器裡打開該檔案，並且點擊進入 input 欄位。

建立 JavaScript 檔案，並且在 $(document).ready(function(){} 的大括號裡

安排下列程式碼。

$('#datepicker').datepicker();

建立與 jQuery UI CSS 檔案的連結︰

就這樣！你已經

將互動小組件增

加到表單中了。

真是驚人，把 jQuery UI 小組件放進 HTML 表單是多麼容易啊。讓我們從日期挑選器（datepicker）開始︰

1

2

3

4

5

6

382 第十章

妝乎水水

這一切真是太酷了，我只需要撰

寫一點點 HTML 和 jQuery。然而，那是否意

味著我對日期挑選器的外觀與功能只能受限於

既有設定？如果我想要產生一點不同的花樣，

又該怎麼辦呢？

JavaScript直譯器

頁面的 DOM 版本

$("#datepicker").datepicker();

正如同所有你撰寫過的 jQuery 程式碼一樣，datepicker 使用選擇器和

方法。

使 用 jQuery 和 jQuery UI 程 式 庫 時，

JavaScript 直 譯 器 向 DOM 要 求 ID 為

datepicker 的元素。

DOM 抓取被選擇的元素，執行元

素上的 datepicker 方法，並且將它

回傳給 JS 直譯器。

jQuery 程式碼

幕後 　花絮

哈囉，拿去。

嘿，DOM，把頁面上 ID

為 datepicker 的元素回

傳給我。

別擔心，jQuery UI提供你一些選項。

真正的威力在此 — datepicker 方法。

datepicker 方法指示 JS 直譯器建造日期挑選器，伴隨

著一堆 HTML，CSS 和內建互動性。

如魔法般出現在頁面上的日曆小組件是內部有多個巢狀結構之div 的 table。

jQuery UI 幕後花絮看起來可能有點兒像魔術，但是 jQuery UI 確實只是一堆設計精妙且撰寫良好的 jQuery 程式碼 — 讓你不必自己動手寫。仔細來看看它是如何運作的。

1

23

4

目前位置 4 383

jquery ui

$("#datepicker").datepicker({ stepMonths: 3 });

$("#datepicker").datepicker({ changeMonth: true });

小組件具有可客製化的選項

「往後」按鈕讓你到達下一個月，當你點擊時，該月份的表格就會被產生。

「往前」按鈕讓你到

達上一個月。

當前日期會以不同顏色被強調。

如果深入探索日期挑選器小組件，你會發現它擁有豐富的可組態

功能和選項。

以選項客製化日期挑選器

w

假設你從八月份開始，當你按下「往前」或「往後」按鈕，你會往前或往後跳三個月。

日期挑選器小組件隨附大

量的可組態選項，例如，

stepMonths 選項讓你改變

想要一次跳過多少個月。

因為 jQuery UI 奠基於 jQuery，你不必撰寫很多程式碼，就能夠將日期挑選器小組件客製化成符合你的需求。在本書撰寫之際，日期挑

選器提供你 46 種不同的選項。

假如你將 changeMonth 選項設定

為 true，使用者可以從下拉選單

中挑選月份。

撰寫程式碼，讓使用者使用下拉選單改變日期挑選器小組件的月份和年

份。提示︰在設定多個選項時，可將逗號放在不同選項之間。

384 第十章

妝乎水水

撰寫程式碼，讓使用者使用下拉選單改變日期挑選器小組件的月份和年

份。提示︰在設定多個選項時，可將逗號放在不同選項之間。

$(‘#datepicker’).datepicker({ changeMonth: true, changeYear: true });

現成可用的程式碼

在 ch10 目錄下的 begin 目錄裡找到名為 sightings_begin.html 的檔案，將它儲存為 end 目錄裡的 sightings_end.html，將下列粗體字程式碼增加到 sightings_end.html 與 my_scripts.js 檔案。

Submit Your Cryptid Sighting

Date of Sighting:

接近 sightings_end.html 檔案的頂端。

$(document).ready(function(){

$('#datepicker').datepicker({ changeMonth: true, changeYear: true});

});//end doc ready

my_scripts.js

接近 sightings_end.html

檔案的底端。我們必須包含 jQuery UI 程式庫，讓所有

的酷炫 UI 功能運作起來。

我們必須連結 jQuery UI CSS 檔

案，好讓小組件看起來正常無誤。

datepicker 程式碼。

sightings_end.html

目前位置 4 385

jquery ui

1. 建造 datepicker，讓使用者輸入觀察日期。

2. 建造更迷人的選鈕，讓使用者選擇生物類型。

3. 建造輸入數值的滑動條，讓使用者輸入與神祕生物間的距離，神祕生物的重量

與高度，觀察地點的緯度和經度。

4. 建造顏色混合器介面元件，讓使用者輸入生物顏色。

5. 建造更美觀的提交按鈕，以交付表單。

輸入上一頁的程式碼之後，在你最喜愛的瀏覽器中打開 sightings_end.html，測試一下 datepicker 小組件。點擊「下一個」與「上一個」按鈕，以及下拉選單的月份和年份，確保一切運作無誤。

日期挑選器順利運作﹗

日期挑選器小組件

如你所願。

changeMonth 與 changeYear選項也成功運作。

檢查一下

檢查清單的項目 1 已經完成，讓我們繼續進行項目 2。

測試版

386 第十章

妝乎水水

裝飾你的按鈕

$( "#radio" ).buttonset();

Choice 1

Choice 2

Choice 3

將你的選鈕群組

放進容器元素。

分組按鈕小組件

buttonset 方法為你組織（分群）

按鈕，並且為每個元素執行 button

方法。

button 方法將舊式 HTML 的簡單選鈕轉變成美觀的、更具互動性的按鈕。

Choice 1按鈕小組件將樣式賦予

這個標籤，讓它看起來

像按鈕。

這個輸入元素會在使用

者點擊時被更新。

$( "#radio1" ).button();

在你的 jQuery 程式碼中，

選擇容器元素。

針對建造相同一組按鈕，jQuery UI 提供 buttonset 方法，透過參照該組按鈕的共同容器元素（container element），把多個個別的按鈕元素變成同一組按鈕。

別忘了輸入按鈕的標記語

言程式碼必須位在 HTML

表單標籤中。

這是單一選鈕的 HTML。

對應的 jQuery 陳述式。

「更迷人」的意思到底是什麼？樣式的主要議題在於製造更好看的按鈕，而且人們會想要點

擊它。jQuery UI 程式庫裡頭一個超級有用的小組件是按鈕小組件。按鈕小組件提供 button方法，幫助你產生更有吸引力的表單元素，像是提交按鈕（submit button），選鈕（radio button）和核取方塊（checkboxe）。

目前位置 4 387

jquery ui

jQuery UI 磁貼 以適當的順序安排程式碼磁貼，為使用者建立一組按鈕，讓他們選擇所看

到的生物類型。我們已經幫你做了幾個。

my_scripts.js

sightings_end.html

$( "#type_select" ).buttonset();

Chupacabras

Jersey Devil

Loch Ness Monster

Sasquatch

388 第十章

妝乎水水

jQuery UI 磁貼解答以適當的順序安排程式碼磁貼，為使用者建立一組按鈕，讓他們選擇所看

到的生物類型。我們已經幫你做了幾個。

$( "#type_select" ).buttonset();

my_scripts.js

Chupacabras

sightings_end.html

Jersey Devil

Loch Ness Monster

Sasquatch

在程式碼目錄裡，

你會發現我們還

針對喜馬拉雅山

雪怪（Yeti）及其

他（Other）神秘

生物增加了按鈕。

不過，這裡礙於

空間，就不完整

列出整個清單。

目前位置 4 389

jquery ui

你安排了這些舊式 HTML

的簡單選鈕…

…並且將它們轉換成美觀酷炫的一組按鈕。

將前述程式碼增加到你的 sightings_end.html 與 my_scripts.js 檔案，然後在你最喜愛的瀏覽器上打開該頁面，確認一切運作無誤。

測試版

1. 建造 datepicker，讓使用者輸入觀察日期。

2. 建造更迷人的選鈕，讓使用者選擇生物類型。

3. 建造輸入數值的滑動條，讓使用者輸入與神祕生物間的距離，神祕生物的重量

與高度，觀察地點的緯度和經度。

4. 建造顏色混合器介面元件，讓使用者輸入生物顏色。

5. 建造更美觀的提交按鈕，以交付表單。

哇，輕鬆愉快。專案檢查清單的下一個項目係蝦咪？

390 第十章

妝乎水水

用滑動條控制數字的輸入jQuery UI 滑動條（slider）插件讓你建造使用者能夠用滑鼠或鍵盤控制的滑動條介面。滑動條也可以幫助你控制使用者輸入的數字。如你

所見，一旦有了 jQuery UI 程式庫，建造小組件可說是一件相當容易的事，建造滑動條小組件也一樣。

$("#slide_me"). slider();

$( "#slide_me" ).slider({

value:0,

min: 0,

max: 100,

step: 5,

orientation: 'vertical'

});

使用者能夠用滑鼠或鍵盤上的方向鍵

移動滑動條上的滑動塊（handle）。

滑動條也提供一堆客製化選項。假定我們需要使用者輸入一組數字，

我們想要的最小值為 0；最大值為 100，並且想要使用者的輸入值以 5 的間隔遞增（只能是 5 的倍數）。下面說明我們如何利用滑動條小組件的設定選項來完成這項工作︰

隨著使用者移動滑動條上的滑動塊，

滑動條的值也隨之改變。

value 選項指明滑動條的

初始值。

min 選項告訴滑動條使用者能夠

輸入的最小值為何。

max 選項告訴滑動條使用者能夠輸入的最大值為何。

step 選項告訴滑動條我們想要值以多少間隔遞增。

orientation 選項指明滑動條呈水平向或垂直向。

這在你的 HTML 檔案中

設定滑動條。這是相關的 jQuery 程式碼。

目前位置 4 391

jquery ui

$( "#slide_me" ).slider({

slide: function( event, ui ) {

$( "#my_value" ).val( ui.value);

}

});

$( "#my_value" ).val( $( "#slide_me" ).slider( "value" ));

我們必須連結滑動條與滑動條小組件的事件處理器之一。 我們看過一些小組件選項，但還沒有探索過 jQuery UI 的另一個強大功能。很多 jQuery 元件提供事件處理器，滑動條便是其中之一，撰寫本書之際，jQuery UI 滑動條小組件提供五個事件處理器：create，start，slide，change 及 stop。為了連結滑動條與表單輸入，讓我們好好試試這些事件處理器。

滑動條小組件有一些很不錯的

選項，但是我們如何把滑動條的

值變成表單輸入呢？

滑動條小組件的 jQuery 指令稿

滑動條小組件的 HTML

這是滑動事件處理

器，使用者在調整

滑動條時觸發滑動

事件。

滑動事件被附貼到

函式回呼（function

callback），當函式

執行時，這會利用

jQuery 的 val 方法設

定 input 元素。

當使用者調整滑動條時，該函式被

呼叫，input 被更新成新的值。

The input “my_value”

The slider “slide_me”

假如你不想讓使用者

能夠輸入數字，就把

這個 input 元素設成

“readonly"。

392 第十章

妝乎水水

為神秘生物調查人員想要的每個輸入欄位填寫空白處的程式碼，他們事先有

針對滑動條選項留下一些註記。

與神秘生物的距離（以呎為單位）：

起始值為 0。

最小距離是 0。

最大距離是 500。

遞增值為 10。

my_scripts.js

$( "#slide_dist" ).slider({

slide: function( event, ui ) {

$( "#distance" )

}

});

Distance from Creature (in ft.):

sightings_end.html

目前位置 4 393

jquery UI

神秘生物的重量（以磅為單位）：

起始值為 0。

最小重量是 0。

最大重量是 5,000。

遞增值為 5。

my_scripts.js my_scripts.js

$( " " ).slider({

slide: function( event, ui ) {

$( " " ).val( ui.value);

}

});

$( "#slide_weight" ).slider({

$( "#weight" ).val( ui.value);

}

});

sightings_end.html

Creature Weight (in lbs.):

Creature Height (in ft.):

神秘生物的高度（以呎為單位）：

起始值為 0。

最小高度是 0。

最大高度是 20。

遞增值為 1。

394 第十章

妝乎水水

為神秘生物調查人員想要的每個輸入欄位填寫空白處的程式碼，他們事先有

針對滑動條選項留下一些註記。

與神秘生物的距離（以呎為單位）：

起始值為 0。

最小距離是 0。

最大距離是 500。

遞增值為 10。

my_scripts.js

$( "#slide_dist" ).slider({

slide: function( event, ui ) {

$( "#distance" )

}

});

Distance from Creature (in ft.):

sightings_end.html

value:0,

step: 10,

.val( ui.value);

max:500,min:0,

distance

slide_dist

目前位置 4 395

jquery ui

神秘生物的重量（以磅為單位）：

起始值為 0。

最小重量是 0。

最大重量是 5,000。

遞增值為 5。

my_scripts.js my_scripts.js

$( " " ).slider({

slide: function( event, ui ) {

$( " " ).val( ui.value);

}

});

$( "#slide_weight" ).slider({

$( "#weight" ).val( ui.value);

}

});

sightings_end.html

Creature Weight (in lbs.):

Creature Height (in ft.):

神秘生物的高度（以呎為單位）：

起始值為 0。

最小高度是 0。

最大高度是 20。

遞增值為 1。

slide_weight

#slide_heightvalue:0,min:0,

value:0,

step: 1,max:20,

min:0,

slide: function( event, ui ) {#height

step: 10,max:5000,

396 第十章

妝乎水水

將前二頁大習題中的程式碼增加到你的檔案，然後在你最喜愛的瀏

覽器裡打開 sightings_end.html。使用你的滑鼠和鍵盤測試一下滑動條（左箭號和右箭號應該會按照遞增值調整滑動條）。

使用者現在可藉由

移動滑動塊而輸入

資料，於是乎，神

秘生物調查人員對

輸入資料的品質便

更能掌握。

你還有兩個數字滑動條要建造︰緯度和經度，便完成專案檢查清單的另一個

項目﹗

測試版

目前位置 4 397

jquery ui

但是緯度和經度具有負值和小數（如

0.00001），滑動條小組件能夠處理這

類數字嗎？

填寫 jQuery程式碼，讓緯度和經度的滑動條運作起來。緯度滑動條的範圍是 -90

到 90，遞增值為 0.00001；經度滑動條的範圍是 -180到 180，遞增值為 0.00001。

value:0, slide: function( event, ui ) { $( " " ).val( ui.value); } });

value:0, slide: function( event, ui ) { $( " " ).val( ui.value); } });

my_scripts.js

jQuery UI也可以處理這件事。滑動條小組件能夠處理負數和小數，你可以輸入負數作為值、

最小值和最大值。在下面練習中試試，看看那是如何運作的。

398 第十章

妝乎水水

填寫 jQuery程式碼，讓緯度和經度的滑動條運作起來。緯度滑動條的範圍是 -90

到 90，遞增值為 0.00001；經度滑動條的範圍是 -180到 180，遞增值為 0.00001。

value:0, slide: function( event, ui ) { $( " " ).val( ui.value); } });

value:0, slide: function( event, ui ) { $( " " ).val( ui.value); } });

my_scripts.js

$( “#slide_lat” ).slider({

min: -90,max: 90,step: 0.00001,

latitude

longitude

step: 0.00001,

min: -180,max: 180,

$( “#slide_long” ).slider({

下一步呢？現在，你必須幫神秘生物調查人員建造一個介面，讓使用者輸入他

們所看到之神秘生物的顏色 — 透過紅色，綠色和藍色滑動條來表現。

目前為止，你已經核取好幾個專案檢查清單的項目︰

. 建造 datepicker，讓使用者輸入觀察日期。

2. 建造更迷人的選鈕，讓使用者選擇生物類型。

3. 建造輸入數值的滑動條，讓使用者輸入與神祕生物間的距離，神祕生物的重量

與高度，觀察地點的緯度和經度。

4. 建造顏色混合器介面元件，讓使用者輸入生物顏色。

目前位置 4 399

jquery ui

使用紅，綠，藍計算混合的顏色

這幾個滑動條需要做相同的事情

紅色，綠色和藍色滑動條各有最小值 0 和最大值 255。當每一種顏色都位在最小值（亦即皆為 0）時，你會得到黑色；當每一種顏色都位在最大值（亦即皆為 255）時，你會得到白色。

當紅色值、綠色值和藍色值

皆為 0 時，你會得到黑色。

當紅色值為 255，而綠色值和藍色

值皆為 0 時，你會得到紅色。

當綠色值為 255，而紅色值和藍色值皆為 0 時，你會得到綠色。

當藍色值為 255，而綠色值和紅色

值皆為 0 時，你會得到藍色。

你需要建造 3 個不同的滑動條︰一個為紅色，一個為綠色，另一個為藍色。然後，你要將所有滑動條的值結合成一種顏色。讓我們看看每

個滑動條小組件需要做什麼。

當紅色值、綠色值和藍色值皆為

255 時，你會得到白色。

我們需要把每個滑動條

的值串接起來，以便建

立 div#swatch 的顏色。

每當使用者調整任何滑動

條時，我們必須更新樣本

顏色（swatch）。

每個滑動條的範圍都是0 – 255。

這些輸入元素的 CSS ID 會是red_val、green_val 與 blue_val。

顏色

#red#green#blue

#swatch

RGB

RGB

RGB

RGB

RGB

RGB

400 第十章

妝乎水水

//color slider styles #slide_dist, #slide_weight, #slide_height {

margin-bottom:14px;

}

#swatch { width: 75px; height: 75px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; }

#green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; }

#blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; }

Color of Creature (use the color sliders to enter): Color (in hexadecimal):

Red: Green: Blue:

現成可用的程式碼

將粗體字程式碼增加到你的 sightings_end.html 與 form.css 檔案，完成顏色選擇器的建造。

form.css

sightings_end.html

這些樣式的每一個

將滑動條的顏色放

到滑動條的軌道。

這個 CSS ID 樣式（style）定義了樣本顏色（swatch）會如何顯示。

紅色滑動條的 div。

綠色滑動條的 div。

藍色滑動條的 div。

樣本顏色

的 div。

這個輸入欄位存放顏色的

十六進位值。

目前位置 4 401

jquery ui

下面指令稿設定紅色，綠色和藍色滑動條。仔細閱讀每一行，根據你

所知道的 jQuery和 jQuery UI知識思考一下它可能在做什麼，然後寫下

你認為程式碼在做什麼。如果不大確定的話，猜猜看也無妨。我們已

經先幫你做一個。

$( "#red, #green, #blue" ).slider({

orientation: "horizontal",

range: "min",

max: 255,

value: 127,

slide: refreshSwatch,

change: refreshSwatch

});

設定滑動條的範圍，讓使用者只能選擇最大值。

問：jQuery UI 隨附的 CSS 是幹嘛用的？

答：關於 jQuery UI 的一大優點是它的開發者們已經想到很多精緻複

雜的 CSS，所以你不必再耗費心思做這件事情。透過檢視 jquery-u i - 1 . 8 . 1 6 . c u s t o m / c s s / s u n n y /j q u e r y - u i - 1 . 8 . 1 6 . c u s t o m . c s s（jQuery UI 套件裡的檔案），你能夠瞭解那些 CSS 是怎麼回事。更多關於那些 CSS 類別的資訊，請參閱 jQuery UI的說明文件：http://jqueryui.com/docs/Theming/API。

問：你說我們能夠產生自己的 jQuery UI主題（theme），該如何做呢？

答： 你 能 夠 透 過 jQuery UI 的"theme roller"，輕易地建立你自己的主題。首先，將你的瀏覽器指到

這裡的 theme roller應用程式︰

http://jqueryui.com/themeroller/

然 後， 點 擊“Roll your own” 頁籤，你會看見一些與設定相關的東

西，像是字體（font），點擊狀態（click states），下落陰影（drop shadows）以及 Overlay Screen等。產生你自己的自訂變化，那些 UI元素就會改變，反映出你的設計設定。

當你按照想要的方式設定好主題

時，請點擊 Download Theme按鈕，你將被帶到 Build Your Download頁面，去建立你自己的 jQuery UI套件。如果你想要保存你的主題

供爾後使用，只要將 Build Your Download頁面加入書籤即可。

問：我不太瞭解互動小組件，它們能夠用來做什麼？

答：互動小組件讓你建立可在桌面應用程式裡找到的互動功能。

使用 Draggable 小組件，可以將你的元素轉變成可拖曳元件。

Droppable 小 組 件 可 用 來 作 為Draggable小組件的目標【譯註】。

Resizable 小組件把你的元素轉變成可縮放物件，你可以透過拖曳它

的角落、右邊界與底邊界來改變它

的尺寸。

Selectable 小組件把你的元素轉變成可選取的元件。網站訪客能夠將

他的鼠標拖曳到那些元素上，選取

它們，就像他們可以選取桌面上的

檔案一樣。

Sortable 小組件讓使用者能夠以互動的方式重新安排我們的元件。

4譯註 簡言之，Droppable 小組件可接受被拖曳過來並且放開的 Draggable 小組件。

402 第十章

妝乎水水

建造 refreshSwatch 函式 要完成顏色混合器，我們需要用 JavaScript 函式來設定及重新整理樣本顏色。下面是該函式的骨架版本，伴隨著一些在完成其細節之前必須考慮的關鍵問題。

下面指令稿設定紅色，綠色和藍色滑動條。仔細閱讀每一行，根據你

所知道的 jQuery和 jQuery UI知識思考一下它可能在做什麼，然後寫下

你認為程式碼在做什麼。如果不大確定的話，猜猜看也無妨。我們已

經先幫你做一個。

function refreshSwatch() {

var red = ??? var green = ??? var blue = ??? var my_rgb = ??? $( "#swatch" ).???; $( "#red_val" ).val(red );

$( "#blue_val" ).val( blue);

$( "#green_val" ).val( green);

$( "#color_val" ).val(my_rgb);

}

你會如何將每個滑動條

的值變成這些變數當中

的每一個。我們必須將 RGB 值串接在這個變數中，以便設定樣本顏色。

什麼 jQuery 方法可以讓我們為樣本顏色設定顏色。

這裡沒什麼大問題，我們可以直接使用 jQuery 的 val 方法，設定輸入欄位，隨著滑動塊調整而顯示滑動條的值。那樣的話，使用者便會知道值是多少。

$( "#red, #green, #blue" ).slider({

orientation: "horizontal",

range: "min",

max: 255,

value: 127,

slide: refreshSwatch,

change: refreshSwatch

});

設定滑動條的範圍，讓使用者只能選擇最大值。

將針對 R，G，B 準備的每個 div 轉變成滑動條小組件。

將它們轉變成水平滑動條，而不是垂直滑動條。

設定值，使滑動塊大致位在中間。

在使用者調整滑動塊時，呼叫名為 refreshSwatch 的函式。

在值有任何改變時，呼叫相同的函式。

將最大值設成 255，限制在合理的顏色範圍內。

目前位置 4 403

jquery ui

然而，這只是問題之一的提示。要撰寫整個函

式，還需要來點腦力激盪。

我們已經知道如何從滑動條拿到值，但

如何建立樣本顏色呢？我們不需要用一

堆程式碼來轉換十六進制的顏色值嗎？

相當犀利的觀點﹗我們可以撰寫一個十進制

到十六進制的轉換函式，或者我們能夠直接

使用從滑動條拿到的十進制的值。

記住，CSS 的 background-color 性質讓我們指定顏色，就像這樣︰

background-color:rgb(255,0,255)

R G B

w 填寫下列空白行，完成 refreshSwatch函式。

function refreshSwatch() {

var red =

var green =

var blue =

var my_rgb =

$( "#swatch" ). ;

$( "#red_val" ).val(red );

$( "#blue_val" ).val( blue);

$( "#green_val" ).val( green);

$( "#color_val" ).val(my_rgb);

}

404 第十章

妝乎水水

function refreshSwatch() {

var red =

var green =

var blue =

var my_rgb =

$( "#swatch" ). ;

$( "#red_val" ).val(red );

$( "#blue_val" ).val( blue);

$( "#green_val" ).val( green);

$( "#color_val" ).val(my_rgb);

}

填寫下列空白行，完成 refreshSwatch函式。

現成可用的程式碼

更新你的 my_scripts.js 檔案，包含針對顏色滑動條準備的程式碼以及前一頁的 refreshSwatch 函式。它們會在網頁載入時觸發滑動條的值，執行 refreshSwatch 函式，那樣便會以有顏色的 swatch元素，而不是空的 swatch元素，開啟該頁面。

$( "#red" ).slider( "value", 127 );

$( "#green" ).slider( "value", 127 );

$( "#blue" ).slider( "value", 127 );

$( “#red” ).slider( “value” );

$( “#blue” ).slider( “value” );$( “#green” ).slider( “value” );

“rgb(“ + red + “,” + green + “,” + blue + “)”;

透過將 RGB 值串接到這個變數…

…我們可以將 swatch 元素

的 CSS 設定成這三個顏色

的組合值。

$( “#swatch” ).css( “background-color”, my_rgb );

目前位置 4 405

jquery ui

在你最喜愛的瀏覽器裡打開 sightings_end.html，使用鼠標和鍵盤切實測試你的滑動條（左箭號和右箭號應該會以遞增值推動滑

動塊）。

現在，使用者透過調整滑動塊來輸入資料，神秘生物調查人員就可擁有控制良好的資料品質。

顏 色 滑 動 條 真 是 棒 呆

了﹗我們的研究工作現在

可輕鬆多了。

測試版

406 第十章

妝乎水水

最後一件小事…

問：我們使用 rgb為我們所建造的顏色滑動條設定 background-color，如果我想要建立使用標準十六進制

顏色表示法的顏色滑動條，那該怎

麼做呢？

答：我們試著建立盡可能簡單優雅的顏色滑動條程式碼，如果你需要

建立以十六進制的顏色格式收集資

料的顏色滑動條，也沒什麼大問題。

你可以使用簡單的程式碼來操作

jQuery UI網站所提供的顏色選擇器，請將你的瀏覽器指到下列 URL︰

h t t p : / / j q u e r y u i . c o m / d e m o s /slider/#colorpicker

現在，找到顏色選擇器示範例

（demo）下的 View Source 連結。選擇並且複製文字欄位內的 HTML，CSS 和 jQuery 程式碼，並且將它

們儲存到新文件，確認有將該文件

連結到你的 jQuery 包裹（bundle）裡適當的 CSS和 jQuery檔案。瞧，你已經擁有使用十六進制顏色值的

顏色選擇器。

問：我需要一個會隨著使用者輸入而提出建議檢索項的表單欄位，

jQuery UI對這項工作有任何支援嗎？

答：是的﹗撰寫本書之際（2011年 8 月），jQuery 的最新功能之一就是 Autocomplete 小組件，它會在使用者輸入表單欄位的過程中顯

示出檢索到的建議值。

檢索到的建議值從何而來？提供的

方式包括 JavaScript 陣列，URL，或者使用能夠透過 Ajax 方法（你在第 8 和 9 章有學到）從伺服器抓取資料的回呼函式等。更多關於這

個小組件的資訊，請參考下列網址

的 jQuery UI示範頁面︰

h t t p : / / j q u e r y u i . c o m / d e m o s /autocomplete/

問：jQuery UI 提供任何表單驗證（form validation）嗎？

答：不，令人遺憾地，jQuery UI不提供表單驗證，但確實有能夠妥

善處理表單驗證的 jQuery插件存在，你可以在下列網址找到這個插件︰

h t t p : / / b a s s i s t a n c e . d e / j q u e r y -plugins/jquery- plugin-validation/

我們會在附錄一中討論更多關於該

插件的問題，請參閱那裡的相關資

訊。

你在這一章已經使用按鈕，而且從第 1章起你就一直在使用按鈕，所以這一個項目對你來說應該相當容易﹗

專案檢查清單僅僅剩下一個項目︰

1. 建造 datepicker，讓使用者輸入觀察日期。

2. 建造更迷人的選鈕，讓使用者選擇生物類型。

3. 建造輸入數值的滑動條，讓使用者輸入與神祕生物間的距離，神祕生物的重量

與高度，觀察地點的緯度和經度。

4. 建造顏色混合器介面元件，讓使用者輸入生物顏色。

5. 建造更美觀的提交按鈕，以交付表單。

目前位置 4 407

jquery UI

w

等一下。確實，我們從

第 1 章就一直在使用按鈕，

但 這 是 jQuery UI 按 鈕 和

HTML 表單元素。

撰寫你必須增加到 my_scripts.js 的單一行程式碼，將原始的按鈕轉換成有主題的jQuery UI按鈕。

好，犀利。

我們已經使用過 jQuery 的 click 方法和 jQuery UI 的 button 方法，但是我們還沒有透過選取表單元素（像輸入提交按鈕）做什麼大事，下

面簡單說明一下如何選取那些東西。

$(":input") = 選擇全部輸入元素。

$(":text") = 選擇 text 類型的全部元素。

$(":radio") = 選擇 radio 類型的全部輸入元素。

$(":checkbox") = 選擇checkbox 類型的全部元素。

$(":submit") = 選擇 submit類型的全部輸入元素。

$(":reset") = 選擇 reset 類型的全部輸入元素。

$(":checked") = 選擇已經被核取的全部輸入。

$(":selected") = 選擇已經被選擇的全部輸入。

$(":enabled") = 選擇被啟用的全部輸入。

$(":disabled") = 選擇被停用的全部輸入。

$(":password") = 選擇意圖作為密碼的全部輸入。

要點提示

408 第十章

妝乎水水

$( “button:submit” ).button(); ;

撰寫你必須增加到 my_scripts.js 的單一行程式碼，將原始的按鈕轉換成有主題的jQuery UI按鈕。

你的工作成果真是讓人滿

意，我們還會在下一章請

你繼續幫忙。

是 呀， 金 多 謝 ﹗

這下子，我們的日子恐

怕不得安寧啦﹗

目前位置 4 409

jquery UI

w

你的表單看起來妙極了，但它目前並未實際提交任何資料。不過，你在第 9 章已經學到做那項工作所需的一切，所以，花點時間思考一下如何讓這個漂亮表單真正發揮功能。

你為本章所下載之程式碼的 end 目錄裡包含進行這項工作所需的全部程式碼︰sightings.html，service.php 和 sightings.sql。你自己必須做一些工作才能讓這一切運作起來，然而，那不就是 Web 開發者的職責嗎？我們包含了你在第 9 章所學到的 Ajax和 JSON方法，好讓你剛剛建造的表單能夠順利提交資料。

你必須自己做所有的建置工作（亦即，執行 sightings.sql 指令稿，或者自行建立包含該指令稿所具有之欄位的資料庫，並且將 Ajax 與 JSON 方法增加到你的 my_scripts.js檔案）。在進入第 11 章之前，你也必須為資料庫增加一些紀錄。如果你需要複習一下MySQL，PHP和 Ajax，別客氣，請翻回第 8和 9章看看。

紅利

這個習題沒有解答，不過，假如遇到任何問題的話，你可以到本書的論壇網頁去看看（www.headfirstlabs.com），好好跟本書作者及其他讀者諸公交流一下。

410 第十章

妝乎水水

jQuery UI

jQuery 的 官方 程 式 庫

， 為 jQuery

核心提供三種類型

的插件：特效、

互動與小組件。

你的 jQuery 工具箱

你已經完成第 10章的閱讀，回顧一下學到些什麼。現在，你已經把 jQuery UI增加到你的工具

箱中。

第十章

小組件

自我完備（self-contained）的元件，為你的

Web 應用

程式增加功能性。

為你節省大量的撰碼時間與程式

複雜度，並且建立可

用且具回應性的使用者介面元素。

按鈕小組件提供 button 方法，幫助你產生更

吸引人的表單元素，像是提交按

鈕、選鈕與核取方塊。

日期挑選器小組件

datepicker 方法指示

JS 直譯器建造日

期挑選器，伴隨著

一堆 HTML、CSS

與內建互動性。

隨附著大量的可客

製化選項。

滑動條一種 UI 元素，藉此，使用者可透過滑鼠與鍵盤，控制他們要輸入的資料。

包含五個事件處理器，可用來將滑 動 條 連 結 到 表 單 輸 入：create、start、slide、change 與 stop。