微信样式库weui使用教程button(2)

来源：互联网发布：淘宝天猫优惠券采集编辑：程序博客网时间：2024/06/05 20:34

文章来源 http://www.vxzsk.com/60.html

按钮可以使用 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样式文件：

记住一定加上<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>

0 0