变脸式应用 - 常用组件（二）

简单对话框

框架提供的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文件中，只要给每个菜单项绑定事件就可以了。