前言:weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档,所以这篇博客就当是方便以后开发而使用吧。
weui资源下载(也可以从官网下载):
http://download.csdn.net/download/zhengyikuangge/9940737
- 手机移动web开发必须要做的两点:1、body中加上ontouchstart,即
<body ontouchstart>...</body>
;2、页面上加入<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- 该博客中所描述的代码只需要导入weui.css即可,例如:
<link rel="stylesheet" href="weui.css" />
。 weui.css在上述weui资源中有,请自行下载。大约是在weui-1.1.2\dist\example 路径下。也可到我的百度网盘下载,链接:http://pan.baidu.com/s/1cFAHNS 密码:iq4d。
该博客中的代码原理上只是修改了html标签中的class而已,请大家对照效果图和代码。
按钮
效果图如下:
普通按钮
<a class="weui-btn weui-btn_primary">普通按钮</a>
刷新按钮
<a class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i></a>
不可点按钮
<a class="weui-btn weui-btn_disabled weui-btn_primary">不可点按钮</a>
小按钮
<a class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
<a class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
<a class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
- 注:都可以按照自己的需要改css属性也可以,比如修改按钮的颜色,代码如下:
<a class="weui-btn weui-btn_primary" style="background:yellow">普通按钮</a>
Input
效果图如下:
单选
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>1111</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id="x11"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-check__label" for="x12">
<div class="weui-cell__bd">
<p>2222</p>
</div>
<div class="weui-cell__ft">
<!-- 注意checked属性,可以获取checked属性的值判断是否被选择 -->
<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"/>
<span class="weui-icon-checked"></span>
</div>
</label>
</div>
多选
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-check__label" for="s11">
<div class="weui-cell__hd">
<!-- 注意checked属性,可以获取checked属性的值判断是否被选择 -->
<input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealt for u.</p>
</div>
</label>
<label class="weui-cell weui-check__label" for="s12">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
</div>
表单内容
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">qq</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="date" value=""/>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" value="" placeholder=""/>
</div>
</div>
</div>
开关
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd">标题文字</div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox" checked="checked"/>
</div>
</div>
文本框
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入文本"/>
</div>
</div>
</div>
文本域
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" rows="3" id="textarea"></textarea>
<div class="weui-textarea-counter" id="shownumber">0/200</div>
</div>
</div>
</div>
选择(select)
<div class="weui-cell weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">国家/地区</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
</div>
</div>
阅读并同意《相关条款》
<label for="weuiAgree" class="weui-agree">
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
<span class="weui-agree__text">
阅读并同意<a href="javascript:void(0);">《相关条款》</a>
</span>
</label>