在AmazeUI这个手机前端框架可以通过以下的脚本:
function calculate(){ $('#confirm1').modal({ }); }
<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>
如下的一个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出了问题。居然还有剔除作用域的做法,根本就不符合编程思想。
原文地址:http://blog.csdn.net/yongh701/article/details/46481185