weui学习总结——1、weui表单常用标签

前言：weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档，所以这篇博客就当是方便以后开发而使用吧。
weui资源下载（也可以从官网下载）：
http://download.csdn.net/download/zhengyikuangge/9940737

• 手机移动web开发必须要做的两点：1、body中加上ontouchstart，即...；2、页面上加入
• 该博客中所描述的代码只需要导入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>1111p>
                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>2222p>
                div>
                <div class="weui-cell__ft">
                
                    <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">
                
                    <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">class="weui-label">qqdiv>
                <div class="weui-cell__bd">
                    class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
                div>
            div>
<div class="weui-cell">
                <div class="weui-cell__hd">for="" class="weui-label">日期div>
                <div class="weui-cell__bd">
                    class="weui-input" type="date" value=""/>
                div>
            div>
            <div class="weui-cell">
                <div class="weui-cell__hd">for="" class="weui-label">时间div>
                <div class="weui-cell__bd">
                    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">
                    class="weui-switch" type="checkbox" checked="checked"/>
                div>
div>

文本框

<div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    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">
                    class</span>=<span class="hljs-string">"weui-textarea"</span> placeholder=<span class="hljs-string">"请输入文本"</span> rows=<span class="hljs-string">"3"</span> <span class="hljs-property">id</span>=<span class="hljs-string">"textarea"</span>>
                    <div class="weui-textarea-counter" id="shownumber">0/200div>
                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">Emailoption>
                    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>