簡單對話框
框架提供的app_alert用於顯示簡單的提示框，類似alert/confirm/prompt這些函數，
只不過app_alert是異步的（調用後立即返回，需要通過回調函數來執行之後的操作），且可以定製顯示樣式。
在瀏覽器控制檯裏輸入以下示例試試:
// 信息框，3秒後自動關閉
app_alert("操作成功", function () {
MUI.showPage("#orderInfo");
}, {timeoutInterval: 3000});
// 錯誤框，"e"表示"error"
app_alert("操作失敗", "e");
// 確認框(確定/取消)，"q"表示"question"
app_alert("立即付款?", "q", function () {
MUI.showPage("#pay");
});
// 輸入框, "p"表示"prompt"
app_alert("輸入要查詢的名字:", "p", function (text) {
callSvr("Book.query", {cond: "name like '%" + text + "%'});
});由於app_alert對話框的id固定爲”muiAlert”，所以要定製顯示樣式，可對#muiAlert及其子對象直接設置CSS樣式；
或者自已重新定義一個id爲”muiAlert”的div，詳見參考文檔。
對話框
對話框與頁面類似，一般放在邏輯頁面中。使用CSS類”mui-dialog”標識對話框。app_alert顯示的就是最簡單的一類對話框，
[任務]
把“創建訂單”頁面(createOrder頁)改寫成一個對話框，放在首頁中。在首頁增加一個“創建訂單對話框”按鈕，點擊後顯示對話框。
效果如下：
在首頁home.html中增加一個id=”dlgCreateOrder”的div組件：
<div mui-initfn="initPageHome" mui-script="home.js">
... hd, bd ...
<!--a href="#createOrder">立即下單</a-->
<a href="#dlgCreateOrder">立即下單</a>
<div class="mui-dialog" id="dlgCreateOrder" style="width:80%">
<div class="hd">
<h2>創建訂單</h2>
</div>
<form class="bd" action="Ordr.add" style="padding:10px">
選擇套餐:
<select name="dscr">
<option value="基礎套餐" data-amount=128>基礎套餐 128元</option>
<option value="精英套餐" data-amount=228>精英套餐 228元</option>
</select>
<button id="btnCreateOrder" class="mui-btn primary">創建訂單</button>
<input type="text" name="amount" value="0" style="display:none">
</form>
</div>
</div>增加了一個鏈接指向它：
<a href="#dlgCreateOrder">立即下單</a>
注意：對話框的id以”dlg”開頭，框架自動打開對話框而不是頁面，點上面鏈接相當於執行：
MUI.showDialog("#dlgCreateOrder");
重新進入應用，點首頁上的按鈕，可以看到對話框已經顯示出來了，點擊對話框背景可關閉對話框。
按鈕上使用了框架提供的CSS類”mui-btn”標識按鈕，再加了”primary”類展現爲缺省建議點擊的按鈕。
在home.js中用MUI.setupDialog爲對話框增加邏輯：
當用戶選擇一個套餐並點擊創建訂單時，調用”Ordr.add”接口（定義在form.action屬性上）。
調用成功後，顯示訂單列表頁，並關閉對話框(MUI.closeDialog)。
function initPageHome()
{
...
// 設置對話框初始化函數，一般名爲 initDlgXXX
MUI.setupDialog(jpage.find("#dlgCreateOrder"), initDlgCreateOrder);
function initDlgCreateOrder()
{
var jdlg = this;
var jf = jdlg.find("form");
MUI.setFormSubmit(jf, api_OrdrAdd, {validate: onValidate});
// 可以返回一個函數，每次顯示時回調，類型"pagebeforeshow"回調。
// 也可以直接return，沒有返回值。
return beforeShow;
function onValidate(jf)
{
// 提交前，自動填寫form中隱藏的amount字段
var f = jf[0];
f.amount.value = $(f.dscr).find("option:selected").attr("data-amount");
}
function api_OrdrAdd(data)
{
MUI.closeDialog(jdlg);
app_alert("訂單創建成功!", "i", function () {
// 顯示訂單列表頁
PageOrders.refresh = true;
MUI.showPage("#orders");
});
}
function beforeShow() {
// 每次打開對話框時清除之前選擇。
jf[0].reset();
}
}
}注意：
- MUI.setupDialog接受一個回調函數用於對話框初始化，它與頁面初始化函數類似，我們定義一個函數名爲initDlgCreateOrder。
這個函數如果有返回值，必須是一個函數用於顯示時回調，相當於頁面的”pagebeforeshow”回調函數。 - 用MUI.setFormSubmit來與後端交互.
菜單
菜單其實是一種特殊的對話框，顯示一個菜單項列表。在框架中用CSS類”mui-menu”來標識它。
我們以訂單詳情頁的右上角菜單爲例講解，效果是這樣:
<div mui-initfn="initPageOrder" mui-script="order.js">
<div class="hd">
<a href="javascript:hd_back();" class="icon icon-back"></a>
<a href="#dlgMenu" class="icon icon-menu"></a>
<h1>訂單明細</h1>
</div>
...
<ul id="dlgMenu" class="mui-menu top">
<li id="mnuRefreshOrder"><i class="icon icon-refresh"></i>刷新</li>
<li id="mnuCancelOrder"><i class="icon icon-delete"></i>取消訂單</li>
</ul>
</div>這個是典型的手機頁，標題欄左右各一個按鈕，分別在”hd”中用兩個a標籤定義。
左上角顯示後退按鈕，執行操作hd_back()，這個函數是框架提供的，和history.back()類似，增強的功能是如果無法回退，則會顯示首頁，適合用在標題欄回退按鈕上。
右上角顯示菜單按鈕，它的href屬性設置爲菜單div的id，注意要以”dlg”開頭，框架就會自動以對話框方式打開它。
在頁面最後定義了id=dlgMenu的菜單，指定了CSS類爲mui-menu標識顯示爲菜單，另一個類top標識菜單在右上角，如果沒有它則和對話框一樣，默認顯示在頁面中央。
在頁面js文件中，只要給每個菜單項綁定事件就可以了。
