JQUERY UI使用者介面設計

對話盒

|

41

<script>

$("#dialog1, #dialog2").dialog();

</script>

圖 4-2　同時顯示的對話盒

dialog()

方法會把 selector 選取的每個元素（在這個例子裡是兩個

<div>

元素）都轉成

對話盒顯示出來。它們一開始會堆疊在一起，使用者只要拖拉對話盒的標題列即可移動

位置。

設定內容格式

使用

dialog()

方法會大幅改變頁面內的 HTML 元素顯示效果。這個方法確實會掃描

HTML 並且為相關元素（這邊的對話盒）加上新的 CSS class，讓它們以適當的效果顯現。

舉例來說，以下是

dialog()

呼叫後的 HTML 碼（圖 4-3）。這段原始碼是以 Firefox 的

Firebug 附加元件看到的。

42

|

第四章

圖 4-3　dialog() 方法產生的 HTML 碼

這些 CSS class 可以用來調整元素的顯示效果。比如說，如果我們修改

<div>

元素擁

有的

ui-dialog-titlebar

CSS class，就會改變視窗標題的外觀。同樣地，如果我們修

改

<div>

元素擁有的

ui-dialog-content

CSS class，就會讓視窗內容以不同的效果顯示

出來。

加入

<style>

標籤，修改 HTML 裡面這些元素（粗體標示部份） ...