借助阿里AntUI元素实现两个Web页面之间的过渡—

今天遇到了这么个问题，如下：

功能需求：有两个页面A和B，点击A中的"确定"按钮，超链接到页面B，在跳转到B页面时出现“Loading”的样式。

需求分析：作为一个后端程序员，一开始想到的是，在页面A上放一个div，div里放一张loading的gif图片，最开始的时候该div是隐藏的，然后点击"确定"时，将该div显示出来。

实践效果：在网上随便找了一张在后端看着还不错的gif loading图片，然后按照上面的思路来做，结果是我始料未及的。一是随便找的gif大小和色调都和当前整个web不搭，二是显示的位置不在中央，三是反正给后端的感觉就是很矬！

思考纠正：项目是基于支付宝服务窗和微信服务号的，整个样式都是用的支付宝的AntUI（http://am-team.github.io/antui/nav.html#info）。结果再次看文档的时候发现有个Toast提示的UI元素，然后再次思考如下，在按钮的点击事件中，先将Loading效果的html内容追加到页面A的body元素中，然后再跳转到页面B。

代码如下：

页面使用了一个布局页，然后引入toast.css文件，当然，还有一个其他样式文件。

@{ViewBag.Title = "温馨提示";Layout = "~/Views/Shared/_amuiLayout.cshtml";
}
@section style
{<link href="https://a.alipayobjects.com/amui/dpl/9.0.0.2/??view/agreement.css,widget/toast.css" rel="stylesheet" />@*引入toast样式*@
}

2.以下是“确认”按钮的代码。

<div class="am-example" id="gotoPay"><div class="am-content"><button type="button" class="am-button" id="btnSure" am-mode="blue  43px">确认</button></div>
</div>

3.下面是点击按钮执行的代码。

 1 <script>
 2         $(function() {
 3             $("#btnSure").click(function () {
 4                 var loadingHtml = "<div class='am-toast'><div class='am-toast-text'><span class='am-toast-icon am-icon'am-mode='toast-loading'></span>载入中</div></div>";//加载中的div代码
 5                 $('body').append(loadingHtml);//追加到body上
 6                 var url = "/ChargeStation/order/GetDeviceState";
 7                 $.post(url,{deviceCode:"@ViewBag.deviceCode"}, function(res) {//请求server状态，跟自己的业务相关，无需考虑
 8                     if (res=="ok") {
 9                         location.href = "/ChargeStation/order/welcomeThen?deviceCode=@ViewBag.deviceCode &payType=@ViewBag.payType";//跳转
10                         //$('body').remove(loadingHtml);
11                     } else {
12                         location.href = "/Errors/DeviceConnError?errMsg=设备处于离线状态！";
13                     }
14                 });
15             });
16         })
17     </script>

最终效果：

最后小结：该功能确实很简单，但是对于自己也是一个学习的过程，学习了阿里的AntUI框架，同时该博文也算是自己学习中小小的笔记吧，方便自己日后查阅。如果您也有同样的需求，望各位笑纳!

本文转自tkbSimplest博客园博客，原文链接：http://www.cnblogs.com/farb/p/4919171.html，如需转载请自行联系原作者

借助阿里AntUI元素实现两个Web页面之间的过渡——“Loading…”相关推荐

两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...
java两个web项目之间如何传值,两个项目之间传递参数有关问题 - 大神进
两个项目之间传递参数问题 --- 大神进情况 1.两个ssh项目 oms 与 GiftERP 2.调用的是GiftERP的一个Goods表,需要将表数据返回给oms项目 3.首先我oms的页面有一 ...
如何在两个jsp页面之间传值，在另外一个页面用EL表达式获取值
第一个jsp页面 <% String ids=request.getParameter("id");int id=Integer.parseInt(ids);%>< ...
在php页面如何调用接口,php之web页面之间的接口调用
//调用页面testgetjson.php post json data require_once("../json/json.php"); $strJson = file_get ...
jquery在两个HTM页面之间跳转传递参数
页面一,待跳转文件 function PreviewTestpaper() { var row = $('#tbTestpaperList').datagrid('getSel ...
如何区别API、REST API、RESTful API和Web Service之间的异同
当你看到API接口你会想起什么?是接口.第三方调用.还是API文档?初看你可能会觉得这太熟悉了,这不是系统开发日常系列吗?但你仔细想一想,你会发现API的概念在你脑海里是如此的模糊.如何你通过搜索引擎 ...
转：Web页面通过URL地址传递参数常见问题及检测方法
Web页面即我们在浏览器中所看到的网页,在Web应用程序中,其页面往往需要进行动态切换和数据交互,页面间的数据常规传递方法有多种,本文主要介绍Web页面处理程序中常见的URL地址参数传递方法,包括概述 ...
Web 之 html 如何显示隐藏Html元素的两种方法简单整理
Web 之 html 如何显示隐藏Html元素的两种方法简单整理目录 Web 之 html 如何显示隐藏Html元素的两种方法简单整理一.简单介绍二.实现原理三.注意事项四.代码示例一.简 ...
“打死都千万不要进外包”，我在阿里外包测试的两年...
我18年毕业于一个普通二本学校,是一个很不出名的小本科.大学期间专业知识也没有去认真的学习,所以毕业的时候就随便找了一份工作,在一个小公司做功能测试. 记得那时候薪资大概是6k左右,因为是在工厂,工作 ...

借助阿里AntUI元素实现两个Web页面之间的过渡——“Loading…”

借助阿里AntUI元素实现两个Web页面之间的过渡——“Loading…”相关推荐

最新文章

热门文章