小狐狸事務所: jQuery EasyUI 測試 : 對話框

2014年11月7日星期五

jQuery EasyUI 測試 : 對話框

對話框是資訊系統必備的人機介面, 基本上有三種 :

Message Box 訊息盒 : 通知功能, 取代 window.alert()
Confirm Box 確認盒 : 決策功能 (Yes/No), 取代 window.confirm()
Prompt Box 輸入盒 : 取得使用者輸入, 取代 window.prompt()

EasyUI 的對話框我覺得比 jQuery UI 簡單, 它包裝了一個 Messager 物件, 透過呼叫 $.messager 的 alert(), confirm(), 以及 prompt() 來實現上述三種基本對話框, 幾乎與 Javascript 的原生方法一模一樣. 相關文件參考 :

# jQuery EasyUI 參考文件
# Messager 物件的 API
# Messager 物件 Demo

首先來看訊息盒 $.message.alert(), 呼叫格式如下 :

$.message.alert(title, msg[, icon[, fn]])

其中, title 為訊息盒標題, msg 為要顯示的內容, icon 是訊息類型, 有四種類型字串, 會在訊息盒中出現不同圖像 :

error : 錯誤圖像
question : 問號 ? 圖像
info : 出現 i 圖像
warning : 驚嘆號 ! 圖像

最後一個參數 fn 為回呼函式 (callback function).

測試範例 1 : http://tony1966.xyz/test/easyuitest/easyui-messager-1.htm [看原始碼]

<a href="#" class="easyui-linkbutton" onclick="alert1()">alert</a>
<a href="#" class="easyui-linkbutton" onclick="alert2()">error</a>
<a href="#" class="easyui-linkbutton" onclick="alert3()">info</a>
<a href="#" class="easyui-linkbutton" onclick="alert4()">question</a>
<a href="#" class="easyui-linkbutton" onclick="alert5()">warning</a>
<script language="javascript">
function alert1() {
$.messager.alert("訊息 (預設)","您好!");
}
function alert2() {
$.messager.alert("訊息 (error)","您好!","error");
}
function alert3() {
$.messager.alert("訊息 (info)","您好!","info");
}
function alert4() {
$.messager.alert("訊息 (question)","您好!","question");
}
function alert5() {
$.messager.alert("訊息 (warning)","您好!","warning");
}
</script>

可見若沒有指定第三參數 icon 就沒有圖像.

其次來看確認盒 $.messager.confirm(), 它具有確定與取消兩個按鈕讓使用者對所詢問之問題進行確認.其參數有三個 :

$.messager.confirm(title, msg[, fn])

第三參數 fn 為備選之回呼函式, 有一個傳入參數 btn, , 當按下確認鈕時確認盒會傳回 true 給回呼函式, 否則傳回 false, 如下列範例 2, 按下確定鈕時就彈出一個訊息盒 :

測試範例 2 : http://tony1966.xyz/test/easyuitest/easyui-messager-2.htm [看原始碼]

<a href="#" class="easyui-linkbutton" onclick="del_confirm()">刪除</a>
<script language="javascript">
function del_confirm() {
$.messager.confirm("請確認","確定要刪除檔案?",callback);
}
function callback(btn){
if (btn) {$.messager.alert("訊息","資料已刪除");}
}
</script>

接下來是輸入盒 $.messager.prompt(), 用來讀取使用者輸入之訊息, 它同樣具有三個參數 :

$.messager.prompt(title, msg, fn)

其第三參數是必要的, 因為必須利用其傳入參數 val 來取得使用者輸入之訊息, 如下列範例 3 所示 :

測試範例 3 : http://tony1966.xyz/test/easyuitest/easyui-messager-3.htm [看原始碼]

<a href="#" class="easyui-linkbutton" onclick="login()">登入</a>
<script language="javascript">
function login() {
$.messager.prompt("登入","請輸入密碼 :",callback);
}
function callback(val){
if (val=="blabla") {$.messager.alert("訊息","您已登入系統.","info");}
else {$.messager.alert("訊息","密碼錯誤!","error");}
}
</script>

當然, 實務上沒有這麼白癡的密碼驗證啦, 這裡純粹只是測試而已.

以上三個是最常用的對話框, 其格式是固定不變的. 如果要客製化的話, 必須使用 Dialog 物件, 其 API 參考 :

# Dialog 物件的 API

從 Dialog 的說明文件可知, Dialog 其實是用 DIV 元素構成的, 透過指定樣式類別為 easyui-dialog 就能把 DIV 妝點成美美的對話框. 其下方的按鈕群組也是利用 DIV 元素包裹以 A 元素做的鏈結按鈕而成, 然後指定 buttons 屬性值為按鈕群組 DIV 的 id 即可將兩組 DIV 串聯起來, 在下面範例 4 中, 我們用一個登入畫面來做示範 :

測試範例 4 : http://tony1966.xyz/test/easyuitest/easyui-messager-4.htm [看原始碼]

<div id="login-dialog" class="easyui-dialog" title="登入視窗" style="width:400px;height:220px;padding:10px 20px" buttons="#login-buttons">
<div class="form-title">系統登入</div>
<form id="login-form" method="post" action="login.php">
<div class="form-item">
<label>帳號:</label>
<input name="account" type="text" class="easyui-textbox" required="true" data-options="iconCls:'icon-man',missingMessage:'此欄位為必填'" style="width:200px">
</div>
<div class="form-item">
<label>密碼:</label>
<input name="password" type="password" class="easyui-textbox" required="true" data-options="iconCls:'icon-lock',missingMessage:'此欄位為必填'" style="width:200px">
</div>
</form>
</div>
<div id="login-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:$('#login-form').submit();" style="width:90px">登入</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#login-dialog').dialog('close')" style="width:90px">取消</a>
</div>

表單中有兩個按鈕, 按下登入按鈕會提交表單內容給後端程式 login.php, 用來驗證是否為有效用戶. 按取消鈕則呼叫 dialog("close") 關閉對話框 (事實上對話框只是隱藏起來, 傳入參數 destroy 才是真正移除對話框). data-options 屬性中的 iconCls 用來指定圖像, icon-man 會在帳號欄位右端顯示一個人像, 而 icon-lock 則在密碼欄位右端顯示一把鎖. missingMessage 用來顯示 validation 提示, 如果沒有設定這參數, 提示語預設為英文, 雖然我們有引入本地化檔案, 但這與對話框中的表單欄位驗證是無關的.

最外層的 div 的 class 指定為 easyui-dialog 後即把 div 改裝成對話框, 這裡以 easyui 開頭的樣式類別都是 EasyUI 特定的, 而以 form 開頭者 (form-title, form-item) 則是自訂的, 這樣表單元素才不會擠在一起, 如下所示 :

<style>
#login-form{
margin:0;
padding:10px 30px;
}
.form-title{
font-size:14px;
font-weight:bold;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.form-item{
margin-bottom:5px;
}
.form-item label{
display:inline-block;
width:80px;
}
.form-item input{
width:160px;
}
</style>

後端的驗證程式為了簡單起見不用資料庫, 就固定檢查帳號密碼是否均為 "blabla", 是傳回 1, 否傳回 0 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$account=$_REQUEST["account"];
$password=$_REQUEST["password"];
if ($account=="blabla" && $password=="blabla") {echo 1;}
else {echo 0;}
?>

最後我們要處理 Ajax 傳回的驗證結果, 在呼叫 form() 方法時傳入含有回呼函式的物件實體, 我們利用後端傳回值 data 來判斷帳密是否符合, 是的話關閉登入對話框, 顯示登入成功訊息; 否的話顯示帳密錯誤訊息 :

$(document).ready(function(){
$("#login-form").form({
success:function(data){
if (data.substr(0,1)=="1") {
$("#login-dialog").dialog("close");
var msg="登入成功!";
}
else {var msg="帳號或密碼錯誤!"}
$.messager.alert("訊息",msg,"info");
}
});
});

注意, 這裡 data 要用 substr() 取出傳回字串的第一個字元, 原因是我使用的主機商會在傳回字串後面加上追蹤統計用的 Javascript (網頁中看不到), 導致 data=="1" 永遠都是 false, 也就是明明帳密正確, 但就是無法登入, 原因就是傳回字串被夾帶了看不到的 Javascript. 這個 Bug 我抓好久, 瀏覽 login.php 都只看到傳回 1 或 0 :

# http://tony1966.xyz/test/easyuitest/login.php?account=blabla&password=blabla

要檢視原始碼才看得到實際傳回來的不只是 0/1 而已 :