【WeUI框架】表单组件系列(表单与选项框-1)[自学笔记-二]

技术文章 胡成 •
文章标签: WeUI框架 input组件
215

前言

关于WeUI框架文章我会一直持续不定期更新，为了让同学能有好的阅读体验，一般一个组件系列的元素我会看多或者少分几篇发表出来。

OK，下面开始！

【一】Input 部分

Input，用于表单，可以分成“输入型”和“选择型”两种。输入型包括单行文本（文本、数值、电话、密码等）、多行文本；选择型包括下拉选择、单选、多选、开关、日期时间等。在 WeUI 中，表单通常与 Cell 组件配合使用。

(1)单选列表框

具体代码如下：

                                <div class="weui-cells_title">
					单选列表项
				</div>
				<div class="weui-cells weui-cells_radio">
					<label class="weui-cell weui-check__label" for="x11">
						<div class="weui-cell__bd">
							<p>男</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>
				</div>
				<div class="weui-cells weui-cells_radio">
				    <label class="weui-cell weui-check__label" for="x12">
				        <div class="weui-cell__bd">
				            <p>女</p>
				        </div>
				        <div class="weui-cell__ft">
				            <input type="radio" class="weui-check" name="radio1" id="x12">
				            <span class="weui-icon-checked"></span>
				        </div>
				    </label>
				    <a href="#" class="weui-cell weui-cell_link">
				    	<div class="weui-cell__bd">
				    		添加更多
				    	</div>
				    </a>
				</div>

效果图：

))965DUCGR3(SXH[)Q}4}SG.png


8(0(RU)FVR~2`O7_Y@V6JZY.png

从这个头部来看 weui-cells_title 就是单选列表框的标题

3DY(Z6]BBR4SN]P4M(8%70I.png

在看上面的代码 class="weui-cells weui-cells_radio"  申明这是一个单选的列表框。

weui-check__label：单选列表框的主体

weui-cell__bd：单选框的中心

weui-cell__ft：单选框的尾部的部分

weui-check：单选框打勾部分

weui-icon-checked：单选框的打勾样式


(2)复选列表框

具体代码如下：

                        <div class="weui-cells__title">
				复选列表项
			</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>复选菜单1</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>复选菜单2</p>
			        </div>
			    </label>
			    <label class="weui-cell weui-check__label" for="s13">
			        <div class="weui-cell__hd">
			            <input type="checkbox" name="checkbox1" class="weui-check" id="s13">
			            <i class="weui-icon-checked"></i>
			        </div>
			        <div class="weui-cell__bd">
			            <p>复选菜单3</p>
			        </div>
			    </label>
			</div>

效果图：

}$SMI6(~N[7%QY{5B25C0[2.png

weui-cells：这个上面漏掉了补充下，申明这是一个列表组

weui-cells_checkbox：申明这是一个复选/多选的列表组

用法与单选列表框一致。


(3)表单控件

具体代码如下：

                        <div class="">
				表单
			</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 type="number" class="weui-input" pattern="[0-9]*" placeholder="请输入QQ号" />
					</div>
				</div>
				
				<div class="weui-cell weui-cell_vcode">
					<div class="weui-cell__hd">
						<label class="weui-label">手机号</label>
					</div>
					<div class="weui-cell__bd">
		            <input class="weui-input" type="tel" placeholder="请输入手机号">
		        </div>
		        <div class="weui-cell__ft">
		        	<a href="#" class="weui-vcode-btn">获取验证码</a>
		        </div>
				</div>	
				
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<label for="" class="weui-label">日期</label>
					</div>
					<div class="weui-cell__bd">
						<input type="date" class="weui-input" 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 type="datetime-local" class="weui-input" />
					</div>
				</div>
				
				<div class="weui-cells__tips">
					底部说明文字
				</div>

效果图：

X7D0KW(}233[AZ@GQH_A[HP.png

weui-cells_form：申明这是一个表单

weui-cell__hd：表单的头部部分

weui-label：标签，在表单控件里一般用于表单头部标识文本部分

weui-cell__bd：表单的中心部分

weui-input：input框

weui-cell_vcode：验证控件

weui-cell__ft：表单尾部

weui-vcode-btn：验证按钮

type="date"：类型为只能输入数字的年/月/日/的input框

weui-cells__tips：列表组提示文字


(4)开关控件

具体代码如下：

<div class="weui-cells__title">
					开关
				</div>
				<div class="weui-cells weui-cells_form">
					<div class="weui-cell weui-cell_switch">
						<div class="weui-cell__bd">
							省电模式
						</div>
						<div class="weui-cell__ft">
							<input type="checkbox" class="weui-switch"/>
						</div>
					</div>
				</div>
				<div class="weui-cells weui-cells_form">
					<div class="weui-cell weui-cell_switch">
						<div class="weui-cell__bd">
							飞行模式
						</div>
						<div class="weui-cell__ft">
							<input type="checkbox" class="weui-switch"/>
						</div>
					</div>
				</div>

效果图：

H4X@B_0AN{2`UKUT$JV]1E8.png

weui-cell_switch：列表开关

weui-switch：开关


(5)文本框，文本域

具体代码如下：

                                <div class="weui-cells__title">
					文本框
				</div>
				<div class="weui-cells">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<input type="text" class="weui-input" placeholder="请输入文本" id="" value="" />
						</div>
					</div>
				</div>
				
				<div class="weui-cells__title">
					文本域
				</div>
				<div class="weui-cells weui-cells_form">
					<div class="weui-cell">
						<div class="weui-cell__bd">
							<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
							<div class="weui-textarea-counter"><span>0</span>/200</div>
						</div>
					</div>
				</div>

效果图：

FP])5WIJ~8I$EQN%%MGL5)E.png

weui-textarea：文本域

weui-textarea-counter：文本域页脚

(6)微信注册控件

具体代码如下：

                                <div class="weui-cells__title">
					微信注册
				</div>
				<div class="weui-cells">
					<div class="weui-cell weui-cell_select weui-cell_select-before">
						<div class="weui-cell__hd">
							<select class="weui-select" >
								<option value="1">+86</option>
								<option value="2">+87</option>
								<option selected="" value="3">+80</option>
								<option value="4">+84</option>
							</select>
						</div>
						<div class="weui-cell__bd">
						<input type="number" class="weui-input" pattern="[0-9]*" placeholder="请输入号码"/>
						</div>
					</div>	
				</div>
				
				<div class="weui-cells__title">选择登入方式</div>
				<div class="weui-cells">
					<div class="weui-cell weui-cell_select">
						<div class="weui-cell__bd">
							<select class="weui-select">
								<option value="1">微信号</option>
								<option  value="2">QQ号</option>
								<option selected="" value="3">手机号</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">
								<option selected="" value="1">中国</option>
								<option value="2">英国</option>
								<option value="3">法国</option>
							</select>
						</div>
					</div>
				</div>
				<label for="weuiAgree" class="weui-agree">
					<input type="checkbox" id="weuiAgree" class="weui-agree__checkbox" />
					<span class="weui-agree__text">
						阅读并同意<a href="#">《相关条款》</a>
					</span>
				</label>
				
				<div class="weui-btn-area">
				    <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
				</div>

效果图：

Z`$8MQE%K897SGE)J`3R[XS.png

weui-cell_select：列表选项框

weui-select：选项

selected=""：默认选中

weui-cell_select-after：微信国家地区选项框

weui-agree：阅读条款控件

weui-agree__checkbox：阅读条款选中框

weui-btn-area：阅读同意控件按钮


——来自胡小哥WeUI自学笔记（持续更新中...）

({{handupNumber}}) ({{favoriteNumber}})
还能输出{{restrictNumber}}个字符  

  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :