Progress
Progress 用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。
HTML代码：
<div class="weui_progress"> <div class="weui_progress_bar"> <div class="weui_progress_inner_bar" style="width: 50%;"></div> </div> <a href="#" class="weui_progress_opr"> <i class="weui_icon_cancel"></i> </a> </div>
Toast
Toast 用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。
HTML代码：
<div id="toast" style="display: none;"> <div class="weui_mask_transparent"></div> <div class="weui_toast"> <i class="weui_icon_toast"></i> <p class="weui_toast_content">已完成</p> </div> </div>
HTML代码：
<div id="loadingToast" class="weui_loading_toast" style="display:none;"> <div class="weui_mask_transparent"></div> <div class="weui_toast"> <div class="weui_loading"> <!-- :) --> <div class="weui_loading_leaf weui_loading_leaf_0"></div> <div class="weui_loading_leaf weui_loading_leaf_1"></div> <div class="weui_loading_leaf weui_loading_leaf_2"></div> <div class="weui_loading_leaf weui_loading_leaf_3"></div> <div class="weui_loading_leaf weui_loading_leaf_4"></div> <div class="weui_loading_leaf weui_loading_leaf_5"></div> <div class="weui_loading_leaf weui_loading_leaf_6"></div> <div class="weui_loading_leaf weui_loading_leaf_7"></div> <div class="weui_loading_leaf weui_loading_leaf_8"></div> <div class="weui_loading_leaf weui_loading_leaf_9"></div> <div class="weui_loading_leaf weui_loading_leaf_10"></div> <div class="weui_loading_leaf weui_loading_leaf_11"></div> </div> <p class="weui_toast_content">数据加载中</p> </div> </div>
新建progressAndToast.jsp，引入jquery库和weui.css文件，如果读者没有weui.css这个文件可在文章底部下载。
progressAndToast.jsp完整代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>进度条和提示信息</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="resources/css/weui.css">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<br><br>
<a href="javascrit:void(0)" class="weui_btn weui_btn_primary" id="progress">进度条</a>
<a href="javascrit:void(0)" class="weui_btn weui_btn_primary" id="toast1">提示信息1</a>
<a href="javascrit:void(0)" class="weui_btn weui_btn_primary" id="toast2">提示信息2</a>
<br><br>
<h2>效果：</h2>
<!-- 进度条开始 -->
<div class="weui_progress" style="display: none" id="pdiv">
<div class="weui_progress_bar">
<div class="weui_progress_inner_bar" style="width: 50%;"></div>
</div>
<a href="<%=basePath %>progressAndToast.jsp" class="weui_progress_opr">
<i class="weui_icon_cancel"></i>
</a>
</div>
<!-- 进度条结束 -->
<br><br>
<!-- 提示信息效果1 -->
<div id="toast" style="display: none;">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">已完成</p>
</div>
</div>
<!-- 提示信息效果2 -->
<div id="loadingToast" class="weui_loading_toast" style="display:none;">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<div class="weui_loading">
<!-- :) -->
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
<p class="weui_toast_content">数据加载中</p>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#progress").click(function(){
jQuery("#pdiv").show();
});
jQuery("#toast1").click(function(){
jQuery("#toast").show();
});
jQuery("#toast2").click(function(){
jQuery("#loadingToast").show();
});
});
</script>
</html>第73行到88行是jquery的js点击效果实现，有三种点击分别对应三个按钮点击实现的效果。
第37行连接地址已改成本页面，以便点击进度条关闭按钮的时候停留在本界面。
此文章本站原创，地址 https://www.vxzsk.com/70.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程