Button

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

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

Button - 图1

  1. <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
  2. <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a>
  3. <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a>
  4. <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a>
  5. <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a>
  6. <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a>
  7.  
  8. <div class="button-sp-area">
  9. <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
  10. <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
  11. <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
  12. <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
  13. <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
  14. <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
  15. <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
  16. </div>

原文: https://github.com/Tencent/weui/wiki/Button