变脸式应用 - 常用组件(二)
来源:互联网 发布:阿德莱德大学知乎 编辑:程序博客网 时间:2024/04/28 07:45
简单对话框
框架提供的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文件中,只要给每个菜单项绑定事件就可以了。
- 变脸式应用 - 常用组件(二)
- 变脸式应用 - 常用组件
- 变脸式应用 / 进入与退出应用(二)
- 变脸式应用 / 分页列表框架(二)
- 变脸式应用 / 制作原生APP(二)
- 变脸式应用
- 变脸式应用 - 逻辑页
- 变脸式应用 / 分页列表框架(三)
- 变脸式应用 / 分页列表框架(四)
- 变脸式应用 - 进入与退出应用
- 变脸式应用 / H5应用优化
- 变脸式应用 / H5应用发布上线
- 变脸式应用 - 调用后端接口
- 变脸式应用 / 分页列表框架
- 变脸式应用 / 制作原生APP
- 变脸式应用 / 创建多个H5应用
- 组件应用技巧(二)
- jdcloud-m(筋斗云) 变脸式单网页应用框架
- 解决quartus13.0中文注释乱码的问题
- tyvj 1519 博彩游戏 AC自动机+DP
- ELK 5.0.1+Filebeat5.0.1 for LINUX RHEL6.6 监控MongoDB日志
- Java 数据结构 --> Properties 接口
- 《 Android中Application的onCreate多次调用问题分析及处理》
- 变脸式应用 - 常用组件(二)
- P1618 三连击(升级版)
- Caffe 中的卷积--权宜之计
- 【51Nod 1022】石子归并 V2
- mysql常见优化
- spring获取数据源
- bit、Byte、bps、Bps、pps、Gbps的详细说明及换算
- sql left join right join 的区别
- 转一篇深度学习简史