微信weui弹出菜单,图标icon(第七课)

2017年08月03日 10:53 | 4968次浏览 作者原创 版权保护

点击按钮弹出底部菜单效果用到了weui.js库,读者可在文章底部下载或界面直接引入网络地址

ActionSheet

ActionSheet 用于显示包含一系列可交互的动作集合,包括说明、跳转等。由底部弹出,一般用于响应用户对页面的点击。

完整代码如下:

<%@ 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>weui</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>
  <div class='demos-content-padded'>
      <a href="javascript:;" id='show-actions' class="weui_btn weui_btn_primary">显示 ActionSheet</a>
      <a href="javascript:;" id='show-actions-bg' class="weui_btn weui_btn_primary">自定义背景色</a>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>
    <script>
      $(document).on("click", "#show-actions", function() {
        $.actions({
          title: "选择操作",
          onClose: function() {
            console.log("close");
          },
          actions: [
            {
              text: "发布",
              className: "color-primary",
              onClick: function() {
                $.alert("发布成功");
              }
            },
            {
              text: "编辑",
              className: "color-warning",
              onClick: function() {
                $.alert("你选择了“编辑”");
              }
            },
            {
              text: "删除",
              className: 'color-danger',
              onClick: function() {
                $.alert("你选择了“删除”");
              }
            }
          ]
        });
      });
      $(document).on("click", "#show-actions-bg", function() {
        $.actions({
          actions: [
            {
              text: "发布",
              className: "bg-primary",
            },
            {
              text: "编辑",
              className: "bg-warning",
            },
            {
              text: "删除",
              className: 'bg-danger',
            }
          ]
        });
      });
    </script>
  </body>
</html>

第32行引入weui.js,<script src="//cdn.bootcss.com/jquery-weui/0.8.0/js/jquery-weui.min.js"></script>


Icon图标效果

代码如下:

<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>
<div class="icon_sp_area">
   <i class="weui_icon_success"></i>
   <i class="weui_icon_success_circle"></i>
   <i class="weui_icon_success_no_circle"></i>
   <i class="weui_icon_info"></i>
   <i class="weui_icon_waiting"></i>
   <i class="weui_icon_waiting_circle"></i>
   <i class="weui_icon_circle"></i>
   <i class="weui_icon_warn"></i>
   <i class="weui_icon_download"></i>
   <i class="weui_icon_info_circle"></i>
   <i class="weui_icon_cancel"></i>
</div>
此文章本站原创,地址 https://www.vxzsk.com/72.html   转载请注明出处!谢谢!

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