功能很簡單, 網頁上會有一個按鈕, 按下去彈出一個輸入盒, 讓使用者輸入華氏溫度, 按下確定鈕就進行換算, 再彈出訊息盒顯示攝氏溫度. 但我們製作順序是倒過來.
首先我們先製作顯示結果的訊息盒, 這是 jQuery UI 對話框中最簡單的一種, 它只是顯示一段訊息, 當使用者按下 "OK" 或 "確定" 或右上角的 X 就關閉對話框, 很簡單. jQuery UI 的對話框使用 div 元素當作承載容器, 其 title 屬性就是對話框的標題. div 元素的內容就是對話框之主體內容, 可以是純文字, 也可以是 HTML.
接著要取得 div 元素的 jQuery 包裹物件, 然後呼叫其 dialog() 方法就可以建立 jQuery UI 的對話框物件 (也就是把 div 給改裝成美美的對話框). 但是如果只是陽春地呼叫 dialog() 而不給它參數的話, 那麼它預設是沒有內建按鈕, 而且會自動開啟, 亦即一打開頁面就會看到對話框放在正中央, 這通常不符合一般的要求, 因此需要傳參數進去修改. 最常用的參數型態就是一個 Javascript 物件實體, 這是直接定義的 Javascript 物件, 以大括號將物件屬性括起來, 各個屬性以 key:value 方式陳述. 在 jQuery UI 中這些屬性稱為選項 (options), 最常用的屬性有五個 (看起來雖然不是字串, 實際上它們是 options 物件的屬性值, 例如 options.modal) :
1. autoOpen (設定自動開啟, 預設 true)
2. buttons (設定按鈕)
3. modal (設定獨占性, 預設 false)
4. title (設定標題, 也就是 div 元素的 title 屬性值)
5. beforeClose (設定對話框關閉前的事件處理函式, 該函式若傳回 false 可以阻止對話窗被關閉)
此外 dialog() 方法還有一種參數型態是字串, 這都是用在呼叫其內在的函式, 最常用的函式有兩個 :
1. 'open' (開啟或顯現對話框)
2. 'close' (關閉對話框, 但實體還存在, 只要呼叫 'open' 就會再次顯現)
就本例之訊息盒而言, 我們需要的選項是將 autoOption 設為 false (不要自動開啟, 要等換算完畢後再開啟), 以及設定一個 "確定" 按鈕. 因為按鈕可以設多個, 所以 buttons 選項也是以物件實體陳述, 即使只有一個按鈕亦然.
buttons 屬性的 key 就是按鈕上的文字字串, 而其值 (value) 則為一個回呼函式, 作為按下該按鈕時的 click 事件處理器, 可以直接以匿名函式定義, 也可以只給一個外部函式名稱, 但注意此外部函式之定義必須放在選項物件實體之前, 否則會出現 "undefined function" 的錯誤.
在本例中, 按下確定鈕後就可以把訊息框關掉了, 所以呼叫 dialog 的 'close' 函式, 其中 $(this) 指的是以 $("#msgbox1") 所取得的 div 元素之包裹物件 (而 this 則是指 div 元素本身).
HTML 部分 :
(div 的內容目前是空的, 要等換算函式算出攝氏溫度後再來設定)
<div id="msgbox1" title="訊息"> </div>
jQuery 部分 :
var opt={autoOpen: false,
buttons: {"確定": function() {$(this).dialog("close");}}
};
$("#msgbox1").dialog(opt);
顯示換算結果的訊息框準備妥當後, 接下來要製作輸入框了. 這個跟訊息框不同的地方是, 它的內容部份要放一個類型為文字欄位 (text) 的 input 元素, 讓使用者輸入華氏溫度, 注意這個 input 元素必須設 id, 以便能用 val() 方法取得使用者輸入之數值.
其次是要放 "確定" 與 "取消" 兩個按鈕, 按確定就擷取輸入之華氏度數, 換算成攝氏度數後, 打開上面我們已準備好的訊息框, 把要顯示的結果字串指定為訊息框內容即可. 若按下取消就直接關掉輸入框. 如下所示, 我們把 "確定" 按鈕的事件處理指定給一個外部函式 do_ok(), 此函式必須放在 opt 物件實體定義之前.
處理函式利用 val() 方法擷取 input 元素中的輸入值, 經過公式換算後, 以 html() 方法將結果設定給上面準備好的訊息框, 並呼叫對話框物件之 'open' 函式打開訊息框.
HTML 部分 :
<div id="inputbox1">
<input id="text1" type="text" />
</div>
jQuery 部分 :
var do_ok=function() { //外部函式須先行定義
var f=parseFloat($("#text1").val()); //取得資料
var c=(f-32)*5/9; //換算為攝氏
$("#msgbox1").html("華氏 " + f + " 度=攝氏 " + c + " 度");
$("#msgbox1").dialog("open");
$(this).dialog("close");
}
var opt={autoOpen: false,
title: "請輸入華氏溫度",
buttons: {
"確定": do_ok,
"取消": function() {$(this).dialog("close");}
}};
$("#inputbox1").dialog(opt);
上面已經把對話框部分安排妥當, 但我們已將其設定為不會自動打開, 因此萬事具備只欠東風, 我們需要一個按鈕來打開輸入盒. jQuery UI 的按鈕很簡單, 先在頁面上放一個 <button> (不能用 <input type="button" />), 然後取得該 button 的包裹物件, 呼叫其 button() 方法即可建立 UI 的 button 物件了. 最後再為它綁定一個 click 事件, 以便打開輸入盒對話框即大功告成矣.
HTML 部分 :
<button id="button1">華氏轉換成攝氏溫度</button>
jQuery 部分 :
$("#button1").button(); //建立 UI 按鈕包裹物件
$('#button1').click(function(){ //為按鈕綁定 click 事件
$('#inputbox1').dialog('open'); //打開輸入對話盒 inputbox1
});
例如 :
範例 1 : http://tony1966.xyz/test/jquerytest/dialog_test_inputbox.htm [看原始碼]
沒有留言 :
張貼留言