基于按钮点击事件的弹窗
来源:互联网 发布:java 获取月份第一天 编辑:程序博客网 时间:2024/04/28 11:13
基于按钮点击事件的弹窗,是各种软件中一项最为基本的功能。如下图所示,点击取消订单按钮,将会弹出一个窗口,让用户确认是否要取消订单。
ChiTu Store 封装了两种类型的弹窗,confirm 和 toast,前者是确认,后者是在点击事件的函数,执行成功后弹出一个提示窗口,并关闭。
一、窗口的 HTML 代码
我们来看看 ChiTu Store 是如何封装的。
confirm 窗口:
<a data-bind="tap:$parent.cancelOrder, click:$parent.cancelOrder, visible:Status() == 'WaitingForPayment'" data-dialog='confirm:"你取消该定单吗?"' href="javascript:" class="btn btn-block btn-default">取消订单</a>
toast 窗口:
<button name="btn_add" class="btn btn-primary pull-right" data-bind="tap: addToShoppingCart,click: addToShoppingCart, enable: ko.unwrap(product.Stock) > 0, text:ko.unwrap(product.Stock) > 0 ? '加入购物车' : '已经售磬'" data-dialog="toast:'成功添加到购物车'"> 加入购物车 </button>
二、重写 knockout click 事件
和上篇文章所说的一样,都是基于重写 knockout 的 click 事件。我们在 translateClickAccessor 函数中,可以看到下面的代码:
confirm 窗口的实现,简单解释一下代码,首获取 data-dialog 属性的字符,并把 data-dialog 属性的字符变成一个对象。因为 confirm 是弹窗,点击了“确认”按钮后,再执行的。这是一个串行操作,所以看到把原来的 deferred 变得一个串行操作,点操了 ok 按钮(result.reslove),就执行,cancel 取消(result.reject)。
var config = getConfig(element, 'data-dialog');if (config.confirm) { var content = config.confirm; deferred = deferred.pipe(function () { var result = $.Deferred(); var html = ComfirmDialogHtml; var node = $(html).appendTo(document.body).modal()[0]; var model = { text: content, ok: function () { $(node).modal('hide'); result.resolve(); }, cancel: function () { result.reject(); } } ko.applyBindings(model, node); return result; });}
toast 窗口的实现,由于 toast 窗口,是在执行完毕才执行的,所以在 result.done 函数回调。
result.done(function () { if (config.toast) { var content = config.toast; var html = ToastDialogHtml; var node = $(html).appendTo(document.body).modal()[0]; var model = { text: content } window.setTimeout(function () { $(node).modal('hide'); $(node).remove(); }, 1000); ko.applyBindings(model, node); }});
相关的代码,在 github 的 ChiTuStore 项目中可以找到。有任何疑问可以给我留言。
0 0
- 基于按钮点击事件的弹窗
- android的按钮点击事件
- 监听按钮的点击事件
- 监听按钮的点击事件
- 监听按钮的点击事件
- 监听按钮的点击事件
- 按钮的多次点击事件
- 监听按钮的点击事件
- android按钮的点击事件
- 基于Qt的OpenGL编程并能实现相应按钮点击事件
- 控制其它窗体的按钮点击事件
- 关闭按钮点击事件的捕捉
- 关闭按钮点击事件的捕捉
- 关闭按钮点击事件的捕捉
- Android分享按钮点击后的事件
- android监听按钮的点击事件
- Android按钮点击事件的绑定
- UITableViewCell上的按钮点击事件处理
- 图解机顶盒数据处理流程
- 机器学习算法比较
- Vue.js学习 Item13 – 指令系统与自定义指令
- LeetCode进阶之路(Regular Expression Matching)
- 深入理解java.lang.Runtime类
- 基于按钮点击事件的弹窗
- Vue.js学习 Item14 – 过滤器与自定义过滤器
- 谈谈jquery的事件名称和命名空间
- Hibernate-----@DynamicInsert、@DynamicUpdate
- java初学之switch语句
- 腾讯Bugly异常监控集成
- tarjan缩点模板 poj 2186
- POJ-3356-AGTC
- 团体程序设计天梯赛-练习集 L1