微信weui进度条和提示信息效果(第五课)

2017年08月03日 09:58 | 4960次浏览 作者原创 版权保护

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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程