jQuery UI widget 之確認盒應用範例

用 jQuery UI 製作具有主題背景特色的確認盒其實比輸入盒要簡單一點, 因為它不需要讀取輸入, 只要依據使用者按了對話框按鈕哪一個按鈕, 去執行相對應的工作就可以了. 關於對話盒的基本操作就不再重複, 請參考前一篇關於訊息盒與輸入盒的介紹 :

http://yhhuang1966.blogspot.tw/2013/04/jquery-ui.html

此範例網頁有一個按鈕, 按一下會出現一個具有 "是" 與 "否" 兩個按鈕的確認盒, 詢問是否要顯示網頁原始碼, 按否就關掉對話框, 按是就開啟新畫面, 向遠端伺服器要求一個 php 檔, 該檔會在新畫面上顯示網頁原始碼.

HTML 部分 :

<div id="confirmbox1" title="確認訊息"> 
    <p>要顯示此網頁的原始碼嗎?</p>
</div>  

jQuery 部分 :

var do_yes=function() { //外部函式須先行定義
                     var url="http://mybidrobot.allalla.com/source.php?" +
                                 "file=jquerytest/dialog_test_confirmbox.htm";
                     window.open(url,"newwin");
                     $(this).dialog("close");
                     }
var opt={autoOpen: false,
               buttons: {
               "是": do_yes,
               "否": function() {$(this).dialog("close");}
               }};
$("#confirmbox1").dialog(opt);  

最後, 當然要一個按鈕來打開確認盒 :

HTML 部分 :

<button id="button1">確認是否要顯示原始碼</button>  

jQuery 部分 :

$("#button1").button();
$('#button1').click(function(){
    $('#confirmbox1').dialog('open');
    });

測試網頁 : http://tony1966.xyz/test/jquerytest/dialog_test_confirmbox.htm