【AmazeUI】AmazeUI的确定框与确定框的致命缺陷
在AmazeUI这个手机前端框架可以通过以下的脚本:
function calculate(){ $('#confirm1').modal({});
}
来触发在HTML已经如下布局的确定框:
<div class="am-modal am-modal-alert" tabindex="-1" id="confirm1"> <div class="am-modal-dialog"> <div class="am-modal-bd">确定框内容</div><div class="am-modal-footer"> <span class="am-modal-btn" data-am-modal-confirm>确定</span> <span class="am-modal-btn" data-am-modal-cancel>取消</span> </div> </div>
</div>
这种确定框已经在《【AmazeUI】在模态框中嵌入表单,形成模态输入框》( 点击打开链接)详细介绍过了。下面以一个例子,重点说说这个确定框的致命缺陷。
如下的一个HTML布局:
<!--使用HTML5开发-->
<!doctype html>
<html class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--自动适应移动屏幕--><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--优先使用webkit内核渲染--><meta name="renderer" content="webkit"><!--不要被百度转码--><meta http-equiv="Cache-Control" content="no-siteapp"/><!--以下才是引入amazeui资源--><link rel="stylesheet" href="assets/css/amazeui.min.css"><link rel="stylesheet" href="assets/css/app.css"><!--引入js的时候要注意,必须先引入jQuery,再引入amazeui,因为这个框架是基于jQuery开发的--><script src="assets/js/jquery.min.js"></script><script src="assets/js/amazeui.min.js"></script><title>AmazeUI模态框</title></head><body><input type="text" id="num1" />+<input type="text" id="num2" /><button onClick="calculate()">=</button><span id="result"></span><!--警告框--><div class="am-modal am-modal-alert" tabindex="-1" id="confirm1"> <div class="am-modal-dialog"> <div class="am-modal-bd">确定计算吗?</div><div class="am-modal-footer"> <span class="am-modal-btn" data-am-modal-confirm>确定</span> <span class="am-modal-btn" data-am-modal-cancel>取消</span> </div> </div></div></body>
</html>
如下的一个脚本:
<script>function calculate(){var num1=$("#num1").val();var num2=$("#num2").val();if(isNaN(num1)||isNaN(num2)||!num1||!num2) alert("任意一个不是数!"); else{ var result=parseFloat(num1)+parseFloat(num2);} $('#confirm1').modal({ onConfirm: function(){alert("num1的值为:"+num1);alert("num2的值为:"+num2);$("#result").html(result);}});}
</script>
本来是希望达到如下的效果,做一个加法器,在做加法之后,给出用户的一个提示,询问是否计算?
但实际运行结果大家看到了,第一次运行的时候,脚本获取到值是正确,但是第二次运行的时候还是第一次运行的值。
根据AmazeUI官网的资料说明,是因为基于性能的考虑,这样的模态框只保存第一次运行的值。这样是非常致命的!正如上面的一些场合,在用户增删改查之前,希望通过先确定的方法,来问用户是否执行操作,但是,由于AmazeUI这样的所谓的性能考虑,导致无法达到多次更新函数数值的效果。
虽然官网中提出了设置通过relatedTarget这个钩子获取数据,该元素为桥梁获取想要的数据等一系列的方式(点击打开链接)
但是实质操作很不理想,至少设置了relatedTarget之后,还无法与Ajax正确交互。
我也曾想过,写成这样行不行能呢:
<script>function calculate(){ $('#confirm1').modal({ onCancel: function() {return false;}});//写你要执行的东西……}
</script>
然而,这并没有什么卵用 ……还没有等用户点击确定,则执行下面的内容了。不会像alert();打断脚本。
这个对话框,还不如JavaScript原生态,兼容任何浏览器的对话框,这个对话框在UC、手机自带的浏览器有效,视觉效果还不错。
if(confirm("提示框内容")){//用户点确定之后的内容
}
else{//用户点取消之后的内容
}
都不知道AmazeUI怎么搞的?什么基于性能考虑?明明连功能都没有实现好,就性能考虑,我只能呵呵了害得我还以为是后台那些神级什么缓存机制与Ajax出了问题。居然还有剔除作用域的做法,根本就不符合编程思想。
【AmazeUI】AmazeUI的确定框与确定框的致命缺陷相关推荐
- js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
- html 选择列表框,列表框和组合框的区别是什么?
列表框和组合框的区别 1.自动排序方式不同: 当列表框不能同时显示所有项目的时候,将自动添加滚动条,使用户可以滚动查阅所有选项.组合框的风格取值定义了组合框的具体属性,包括是否自动排序,是否有滚动条. ...
- python中组合框_PyQt 组合框
# PyQt 组合框 > 原文: [https://pythonbasics.org/PyQt-combobox/](https://pythonbasics.org/PyQt-combobox ...
- python+selenium七:下拉框、选项框、select用法
# from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains im ...
- 如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们?雪原虎 发布于:2007-10-22 00:32
如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们? 雪原虎 发布于:2007-10-22 00:32 1.文本框 1.1 <input type="text ...
- Vue.js-Day02-AM【Vue表单、核心指令(单选框、密码框、多行文本框、单选、多选、勾选、下拉列表)、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 1.Vue表单 原生JS实现异步表单提交 运行截图 代码 核心指令 单选框.密码框.多行文本框 单选 多选 勾 ...
- opencv进阶学习笔记6:使用鼠标在图像上绘制矩形框或者多边形框
基础版笔记传送门: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版笔记目录: python+opencv进阶版学习笔记目录(适合有一定基础) 感兴趣区域传统绘制: openc ...
- 向工作表中添加列表框或组合框
http://office.microsoft.com/zh-cn/excel-help/HP010236681.aspx 添加列表框(表单控件) 如果"开发工具"选项卡未显示,请 ...
- 点击area不出现黑框_30款厨房门,黑框?白框?你家选哪个合适?
点击上方"蓝字"关注我,可领取免费设计图 导语:厨房门通常是在客餐厅里面比较显眼的位置,它的选择搭配也同样影响着客餐厅的整体风格搭配,因此对于厨房门的搭配也是不容忽视的,今天就跟大 ...
- java pdf表单域实现_Java 创建PDF表单域 - 文本框、复选框、列表框、组合框、按钮等...
表单域包括文本框.复选框.列表框.组合框.按钮和签名域等,主要用于收集用户填写或选择的数据.这篇文章将介绍如何在Java应用程序中给PDF文档添加表单域. 导入jar文件 本文所使用的PDF类库是Fr ...
最新文章
- java反射构造函数_【译】3. Java反射——构造函数
- ecs服务器内网连接_让不同地域云服务器ECS和云数据库内网互通
- Netweaver的端口号和Spring boot内嵌的Tomcat端口
- Enhancement增强图形halcon算子,持续更新
- 10 工作中常见知识汇总
- 微信小程序口令红包-语音识别
- From Calcite to Tampering with Flink SQL
- UESTC 1634 去年春恨却来时,落花人独立,微雨燕双飞
- excel 对列数据进行去重操作
- 猿创征文|Python学习工具千千万,我心中的TOP10
- 81个人脸关键点检测
- WPF实战之DataGrid设置行高
- 手机电视的概念及其发展状况
- CAD如何快速标注尺寸?CAD标注尺寸教程
- 深度学习框架之paddlepaddle
- Linux网络延迟排查方法
- ubuntu卸载旧的NVIDIA驱动,安装新驱动,并安装Nvidia-docker2
- sql查询当天 当月 当年
- Jsp在web开发中常用到的技术(一)
- mysql向表中插中文显示,针对mysql数据库无法在表中插入中文字符的解决方案(彻底解决jav...
热门文章
- 计算机一级excel怎么算分,计算机一级Word和Excel操作自动评分的实现.doc
- TIBCO横向打印数据
- 电脑越来越像人 - 人工智能创作文案背后的秘密:文本生成器 API - Text Generator API
- android 游戏开发中的声音
- Minimum Barrier Salient Object Detection at 80 FPS 论文阅读笔记
- oracle结果相减_Oracle 的加减法函数
- Photoshop如何将图片的空白处理成透明
- html5的网络拓扑图,基于 HTML5 网络拓扑图的快速开发之入门篇(一)
- c语言python是什么意思_Python和C语言区别是什么?
- MSP430定时器介绍