weui 学习总结——1、weui 表单常⽤标签⼿机移动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" />
。该博客中的代码原理上只是修改了html标签中的class⽽已，请⼤家对照效果图和代码。按钮
效果图如下：普通按钮
刷新按钮
不可点按钮⼩按钮
注：都可以按照⾃⼰的需要改css属性也可以，⽐如修改按钮的颜⾊，代码如下：<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 >
<a class ="weui-btn weui-btn_primary" style ="background:yellow">普通按钮</a >
Input
效果图如下：
单选
多选
cssclass属性表单内容<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-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__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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论