微信样式库weui使用教程button(第二课)

2017年07月30日 21:41 | 6063次浏览 作者原创 版权保护

按钮可以使用 a 或者 button 标签。wap 上要触发按钮的 active 态,必须触发 ontouchstart 事件,可以在 body 上加上 ontouchstart="" 全局触发。

按钮常见的操作场景:确定、取消、警示,分别对应 class:weui_btn_primary、weui_btn_default、weui_btn_warn,每种场景都有自己的置灰态weui_btn_disabled,除此外还有一种镂空按钮 weui_btn_plain_xxx,客户端 webview 里的按钮尺寸有两类,默认宽度100%,小型按钮宽度自适应,两边边框与文本间距0.75em:

下载微信WeUI css样式文件weui.css,请点击【实例源码下载】

新建button.jsp,在<head></head>之间引入css样式文件:

<link rel="stylesheet" type="text/css" href="resources/css/weui.css">

记住一定加上<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">便于手机浏览器浏览。

在<body></body>添加不同的button按钮代码:

<a href="#" class="weui_btn weui_btn_primary">按钮</a> 
<a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a> 
<a href="#" class="weui_btn weui_btn_warn">确认</a> 
<a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
<a href="#" class="weui_btn weui_btn_default">按钮</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a> 
<div class="button_sp_area">
<a href="#" class="weui_btn weui_btn_plain_default">按钮</a>     
<a href="#" class="weui_btn weui_btn_plain_primary">按钮</a>     
<a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>     
<a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a> </div>

运行项目,浏览器中输入http://localhost:8080/weChat/button.jsp,效果如下:

模拟的是苹果6

Button.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 http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">         
	<link rel="stylesheet" type="text/css" href="resources/css/weui.css">
	</head>
  
  <body>
  <br><br><br>
  
 <a href="#" class="weui_btn weui_btn_primary">按钮</a> 
<a href="#" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a> 
<a href="#" class="weui_btn weui_btn_warn">确认</a> 
<a href="#" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
<a href="#" class="weui_btn weui_btn_default">按钮</a>
<a href="#" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a> 
<div class="button_sp_area">
<a href="#" class="weui_btn weui_btn_plain_default">按钮</a>     
<a href="#" class="weui_btn weui_btn_plain_primary">按钮</a>     
<a href="#" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>     
<a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a> </div> 
  </body>
</html>


此文章本站原创,地址 https://www.vxzsk.com/60.html   转载请注明出处!谢谢!

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