【WeUI框架】表单组件系列(按钮篇)[自学笔记1]

技术文章胡成 •

文章标签: WeUI框架

框架

weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。学习过Botstrap框架的同学学习weui框架也会事半功倍。

首先我们要先引用weui框架的样式

我的框架样式是直接去weui官网复制的1.1.3版本，这是网址链接：

https://github.com/Tencent/weui/wiki/getting-started

官网上目前有俩个版本看自己需要用哪个版本就复制哪个。

P6]KOVT1F]}PDJ63~`UNPOY.png

有一点需要注意1.1.3版本与0.4.3老版本类名写法格式有点改变，具体的我在这就不说明了，

要了解的可以上这网址看看：想了解1.0.0在代码层面上做了哪些改变，请戳链接

好了前戏就到这了，下面上主菜！

这篇主要讲按钮的使用。

按钮可以使用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：

<a href="#" class="weui-btn weui-btn_primary">页面操作</a>

1GVEP8}{O3UQTULHD@X1%7G.png 这是一个页面操作按钮。

<weui-btn>这是类名,定义这是一个weui按钮，<weui-btn_primary>这类名定义是：主要的按钮，

<a href="#" class="weui-btn weui-btn_disabled weui-btn_primary">页面操作失效形态</a>

AEXG09`U9)9`Z3A@8A~4(XU.png 这是一个失效的操作按钮的形态显示

<weui-btn_disabled>这类名定义是：失效的/残疾的按钮，

<a href="#"class=" weui-btn weui-btn_default">页面次要操作</a>

N8`JSOKY(BYC@WPJL_V9U0U.png 这是一个次要的/默认的操作的按钮形态显示

<weui-btn_default>这类名定义是：默认的/次要的按钮，

<a href="#"class=" weui-btn weui-btn_default weui-btn_disabled">页面次要操作失效形态</a>

{E%{1C)H}753OPU8MY04Q68.png 这是一个警告操作的按钮

<weui-btn_warn>这类名定义是：警告的按钮。

<a href="#"class=" weui-btn weui-btn_warn weui-btn_disabled">页面警告操作失效形态</a>

$87MHMQIMK{QPGXEH4UQ_ZT3.png$ 这是一个警告失效的按钮

< weui-btn_warn weui-btn_disabled>这俩类名放在同一个标签里的定义就变成了：警告的失效的按钮，

<a href="#" class="weui-btn weui-btn_plain-primary">页面操作镂空形态</a>

@]}~5A_CGPR69~QN43K%V`B.png 这是一个镂空的主要按钮

<weui-btn_plain-primary>类名定义：镂空的主要按钮，

<a href="#"class=" weui-btn weui-btn_plain-default">页面次要操作镂空形态</a>

{OV(JAL1K[HOZQYVN3UQBV4.png 这是一个镂空的默认按钮

<weui-btn_plain-default>类名定义：镂空默认按钮，

<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>

这是三个小号的按钮：主要的，默认的，警告的

<weui-btn_mini>类名定义：小号按钮，与<weui-btn_primary>,<weui-btn_default>,<weui-btn_warn>,用在一个标签里的时就会显示上图这样的小号按钮。

关于weui框架文档里的按钮目前就是这几个，这些按钮用法简单直接使用weui的样式类名就可以了。有一点需要注意，一般在自定义时 weui框架前缀是 weui-xx 注意是"-"不是"_"。在引用标签类名时一定要分清“-”,“_”！！！

下面我把我的完全代码发上，有什么写欠缺的欢迎指正。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>(表单组件)exercise</title>
		<!--自适应引用代码-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--引用weUI框架样式-->
		<link rel="stylesheet" type="text/css" href="css/weui1.13.css"/>
	</head>
	<body ontouchstart="">
		<!--按钮组件-->
		<div>
			<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_default">页面次要操作</a>
			<a href="#"class=" weui-btn weui-btn_default weui-btn_disabled">页面次要操作失效形态</a>
			<a href="#"class=" weui-btn weui-btn_warn">页面警告操作</a>
			<a href="#"class=" weui-btn weui-btn_warn weui-btn_disabled">页面警告操作失效形态</a>
			<a href="#" class="weui-btn weui-btn_plain-primary">页面操作镂空形态</a>
			<a href="#"class=" weui-btn weui-btn_plain-default">页面次要操作镂空形态</a>
			
			<div style="margin-top: 10px;text-align: center;">
				<a href="#"class="weui-btn weui-btn_plain-primary" style="width: 50%;">按钮</a>
				<a href="#"class="weui-btn weui-btn_plain-default" style="width: 50%;">按钮</a>
			    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
			    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
			    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
			    <br/>
			    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary"style="border:1px solid red;">按钮</a>
			    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default"style="border:1px solid #000000;">按钮</a>
			    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn"style="border:1px solid #04BE02;">按钮</a>
			</div>
		</div>	
	</body>
</html>

——来自胡小哥WeUI自学笔记

【WeUI框架】表单组件系列(按钮篇)[自学笔记1]

框架

{{Comments.author}}

{{reply.author}}

胡成

他的最新文章

他的热门文章

文章存档

文章分类