weui学习总结——1、weui表单常用标签
2017-08-28 09:45
447 查看
前言:weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档,所以这篇博客就当是方便以后开发而使用吧。
weui资源下载(也可以从官网下载):
http://download.csdn.net/download/zhengyikuangge/9940737
手机移动web开发必须要做的两点:1、body中加上ontouchstart,即
该博客中所描述的代码只需要导入weui.css即可,例如:
weui.css在上述weui资源中有,请自行下载。大约是在weui-1.1.2\dist\example 路径下。也可到我的百度网盘下载,链接:http://pan.baidu.com/s/1cFAHNS 密码:iq4d。
该博客中的代码原理上只是修改了html标签中的class而已,请大家对照效果图和代码。
![](https://img-blog.csdn.net/20170828093249600?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhlbmd5aWt1YW5nZ2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
注:都可以按照自己的需要改css属性也可以,比如修改按钮的颜色,代码如下:
![](https://img-blog.csdn.net/20170828093912992?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhlbmd5aWt1YW5nZ2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170828093922197?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhlbmd5aWt1YW5nZ2U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
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>
相关文章推荐
- 表单标签,已经常用的各种控件总结
- 表单标签,已经常用的各种控件总结
- html常用标签总结
- html5常用标签 body部分(2)包括 表格、图片、链接、视频、表单、以及其他html5新增
- JSTL 常用标签总结
- 黑马程序员_HTML常用标签总结
- Struts2常用标签总结
- Struts2常用标签总结
- Struts2常用标签总结
- struts常用标签(包括特殊的表单标签)使用
- Struts2常用标签总结
- Struts UI表单常用标签
- HTML常用的标签总结
- struts2常用UI标签之:Form标签
- Struts2常用标签总结
- Struts2中的常用表单标签
- SpringMVC Controller介绍及常用注解和SpringMVC表单标签简介
- HTML5表单标签及标签属性总结
- Struts2常用标签使用和总结(包括前后台,出生日期,级联城市,遍历列表等)
- ofbiz总结——使用auto-fields-service标签自动填充表单