mirror of
https://github.com/Tencent/weui.git
synced 2026-03-13 08:02:03 +08:00
docs: form example
This commit is contained in:
xushengni
378
dist/example/index.html
vendored
378
dist/example/index.html
vendored
@@ -683,15 +683,34 @@
|
||||
</script>
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form">
|
||||
<div class="page">
|
||||
<div class="page__hd">
|
||||
<h1 class="page__title">Form</h1>
|
||||
<p class="page__desc">表单页</p>
|
||||
</div>
|
||||
<div class="page__bd page__bd_spacing">
|
||||
<a href="#form_page" class="weui-btn weui-btn_default">表单结构</a>
|
||||
<a href="#form_input_status" class="weui-btn weui-btn_default">输入框状态</a>
|
||||
<a href="#form_vcode" class="weui-btn weui-btn_default">验证码</a>
|
||||
<a href="#form_checkbox" class="weui-btn weui-btn_default">复选框</a>
|
||||
<a href="#form_radio" class="weui-btn weui-btn_default">单选框</a>
|
||||
<a href="#form_switch" class="weui-btn weui-btn_default">开关</a>
|
||||
<a href="#form_select" class="weui-btn weui-btn_default">选择框</a>
|
||||
<a href="#form_textarea" class="weui-btn weui-btn_default">文本域</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_page">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单标题</h2>
|
||||
<div class="weui-form__desc">表单描述示意</div>
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">表单页描述</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">输入框</div>
|
||||
<div class="weui-cells__title">表单组标题</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">QQ号</label></div>
|
||||
@@ -713,8 +732,120 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
表单页提示，居中对齐
|
||||
</p>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
表单页提示，居中对齐
|
||||
</p>
|
||||
</div>
|
||||
<div class="weui-form__extra-area">
|
||||
<div class="weui-footer">
|
||||
<p class="weui-footer__links">
|
||||
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
|
||||
</p>
|
||||
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_input_status">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">状态展示</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单报错</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell weui-cell_warn">
|
||||
<div class="weui-cell__hd"><label class="weui-label">卡号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" autofocus type="number" pattern="[0-9]*" placeholder="请输入QQ号" value="1234567"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单只读、置灰</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell weui-cell_readonly">
|
||||
<div class="weui-cell__hd"><label class="weui-label">EMail</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cell weui-cell_disabled">
|
||||
<div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_vcode">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">验证码</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">验证码</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
|
||||
@@ -737,36 +868,47 @@
|
||||
</div>
|
||||
<div class="weui-cells__tips"><a href="javascript:;">收不到验证码</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<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>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_checkbox">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">复选框</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单报错</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell weui-cell_warn">
|
||||
<div class="weui-cell__hd"><label class="weui-label">卡号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入QQ号" value="1234567"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单只读、置灰</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">EMail</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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">
|
||||
@@ -791,8 +933,46 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">下一步</a>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
点击下一步即表示<a href="javascript:;">同意用户协议</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_radio">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">单选框</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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">
|
||||
@@ -818,8 +998,41 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_switch">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">开关</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>
|
||||
@@ -838,8 +1051,41 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_select">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">选择框</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">选择</div>
|
||||
<div class="weui-cells">
|
||||
<div class="weui-cell weui-cell_select">
|
||||
<div class="weui-cell__bd">
|
||||
@@ -877,42 +1123,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<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>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
点击下一步即表示<a href="javascript:;">同意用户协议</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="weui-form__extra-area">
|
||||
<div class="weui-footer">
|
||||
<p class="weui-footer__links">
|
||||
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
|
||||
</p>
|
||||
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
@@ -931,6 +1148,33 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_form_textarea">
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">文本域</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl_toast">
|
||||
<div class="page">
|
||||
@@ -1690,6 +1934,7 @@
|
||||
<p class="icon-box__desc">用于表示等待</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="icon_sp_area">
|
||||
<i class="weui-icon-circle"></i>
|
||||
<i class="weui-icon-success"></i>
|
||||
@@ -1714,6 +1959,7 @@
|
||||
<i class="weui-icon-back"></i>
|
||||
<i class="weui-icon-back-circle"></i>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div class="page__ft">
|
||||
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
|
||||
|
||||
50
dist/style/weui.css
vendored
50
dist/style/weui.css
vendored
File diff suppressed because one or more lines are too long
2
dist/style/weui.min.css
vendored
2
dist/style/weui.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,247 +1,16 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单标题</h2>
|
||||
<div class="weui-form__desc">表单描述示意</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">输入框</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 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 class="weui-label">时间</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="datetime-local" value="" placeholder=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">验证码</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号"/>
|
||||
</div>
|
||||
<div class="weui-cell__ft">
|
||||
<i class="weui-icon-info-circle"></i>
|
||||
</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 autofocus class="weui-input" type="number" pattern="[0-9]*" placeholder=""/>
|
||||
</div>
|
||||
<div class="weui-cell__ft">
|
||||
<button class="weui-btn weui-btn_default weui-vcode-btn">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__tips"><a href="javascript:;">收不到验证码</a></div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单报错</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell weui-cell_warn">
|
||||
<div class="weui-cell__hd"><label class="weui-label">卡号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入QQ号" value="1234567"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单只读、置灰</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">EMail</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>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>
|
||||
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
|
||||
<div class="weui-cell__bd">添加更多</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>cell standard</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>cell standard</p>
|
||||
</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>
|
||||
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
|
||||
<div class="weui-cell__bd">添加更多</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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 class="weui-switch" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cell weui-cell_switch">
|
||||
<div class="weui-cell__bd">兼容IE Edge的版本</div>
|
||||
<div class="weui-cell__ft">
|
||||
<label for="switchCP" class="weui-switch-cp">
|
||||
<input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked"/>
|
||||
<div class="weui-switch-cp__box"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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" 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-before">
|
||||
<div class="weui-cell__hd">
|
||||
<select class="weui-select" name="select2">
|
||||
<option value="1">+86</option>
|
||||
<option value="2">+80</option>
|
||||
<option value="3">+84</option>
|
||||
<option value="4">+87</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<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>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
点击下一步即表示<a href="javascript:;">同意用户协议</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="weui-form__extra-area">
|
||||
<div class="weui-footer">
|
||||
<p class="weui-footer__links">
|
||||
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
|
||||
</p>
|
||||
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page__hd">
|
||||
<h1 class="page__title">Form</h1>
|
||||
<p class="page__desc">表单页</p>
|
||||
</div>
|
||||
<div class="page__bd page__bd_spacing">
|
||||
<a href="#form_page" class="weui-btn weui-btn_default">表单结构</a>
|
||||
<a href="#form_input_status" class="weui-btn weui-btn_default">输入框状态</a>
|
||||
<a href="#form_vcode" class="weui-btn weui-btn_default">验证码</a>
|
||||
<a href="#form_checkbox" class="weui-btn weui-btn_default">复选框</a>
|
||||
<a href="#form_radio" class="weui-btn weui-btn_default">单选框</a>
|
||||
<a href="#form_switch" class="weui-btn weui-btn_default">开关</a>
|
||||
<a href="#form_select" class="weui-btn weui-btn_default">选择框</a>
|
||||
<a href="#form_textarea" class="weui-btn weui-btn_default">文本域</a>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
61
src/example/fragment/form_checkbox.html
Normal file
61
src/example/fragment/form_checkbox.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">复选框</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>
|
||||
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
|
||||
<div class="weui-cell__bd">添加更多</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">下一步</a>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
点击下一步即表示<a href="javascript:;">同意用户协议</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
59
src/example/fragment/form_input_status.html
Normal file
59
src/example/fragment/form_input_status.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">状态展示</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单报错</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell weui-cell_warn">
|
||||
<div class="weui-cell__hd"><label class="weui-label">卡号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" autofocus type="number" pattern="[0-9]*" placeholder="请输入QQ号" value="1234567"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单只读、置灰</div>
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell weui-cell_readonly">
|
||||
<div class="weui-cell__hd"><label class="weui-label">EMail</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cell weui-cell_disabled">
|
||||
<div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
71
src/example/fragment/form_page.html
Normal file
71
src/example/fragment/form_page.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">表单页描述</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells__title">表单组标题</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 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 class="weui-label">时间</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="datetime-local" value="" placeholder=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
表单页提示，居中对齐
|
||||
</p>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<p class="weui-form__tips">
|
||||
表单页提示，居中对齐
|
||||
</p>
|
||||
</div>
|
||||
<div class="weui-form__extra-area">
|
||||
<div class="weui-footer">
|
||||
<p class="weui-footer__links">
|
||||
<a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>
|
||||
</p>
|
||||
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
57
src/example/fragment/form_radio.html
Normal file
57
src/example/fragment/form_radio.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">单选框</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells weui-cells_radio">
|
||||
<label class="weui-cell weui-check__label" for="x11">
|
||||
<div class="weui-cell__bd">
|
||||
<p>cell standard</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>cell standard</p>
|
||||
</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>
|
||||
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
|
||||
<div class="weui-cell__bd">添加更多</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
69
src/example/fragment/form_select.html
Normal file
69
src/example/fragment/form_select.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">选择框</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells">
|
||||
<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-before">
|
||||
<div class="weui-cell__hd">
|
||||
<select class="weui-select" name="select2">
|
||||
<option value="1">+86</option>
|
||||
<option value="2">+80</option>
|
||||
<option value="3">+84</option>
|
||||
<option value="4">+87</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
50
src/example/fragment/form_switch.html
Normal file
50
src/example/fragment/form_switch.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">开关</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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 class="weui-switch" type="checkbox"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cell weui-cell_switch">
|
||||
<div class="weui-cell__bd">兼容IE Edge的版本</div>
|
||||
<div class="weui-cell__ft">
|
||||
<label for="switchCP" class="weui-switch-cp">
|
||||
<input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked"/>
|
||||
<div class="weui-switch-cp__box"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
24
src/example/fragment/form_textarea.html
Normal file
24
src/example/fragment/form_textarea.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">文本域</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
60
src/example/fragment/form_vcode.html
Normal file
60
src/example/fragment/form_vcode.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<div class="page">
|
||||
<div class="weui-form">
|
||||
<div class="weui-form__text-area">
|
||||
<h2 class="weui-form__title">表单页标题</h2>
|
||||
<div class="weui-form__desc">验证码</div>
|
||||
</div>
|
||||
<div class="weui-form__control-area">
|
||||
<div class="weui-cells__group weui-cells__group_form">
|
||||
<div class="weui-cells weui-cells_form">
|
||||
<div class="weui-cell">
|
||||
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
|
||||
<div class="weui-cell__bd">
|
||||
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号"/>
|
||||
</div>
|
||||
<div class="weui-cell__ft">
|
||||
<i class="weui-icon-info-circle"></i>
|
||||
</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 autofocus class="weui-input" type="number" pattern="[0-9]*" placeholder=""/>
|
||||
</div>
|
||||
<div class="weui-cell__ft">
|
||||
<button class="weui-btn weui-btn_default weui-vcode-btn">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-cells__tips"><a href="javascript:;">收不到验证码</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weui-form__tips-area">
|
||||
<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>
|
||||
</div>
|
||||
<div class="weui-form__opr-area">
|
||||
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
var $tooltips = $('.js_tooltips');
|
||||
|
||||
$('#showTooltips').on('click', function(){
|
||||
if ($tooltips.css('display') != 'none') return;
|
||||
|
||||
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
|
||||
$('.page.cell').removeClass('slideIn');
|
||||
|
||||
$tooltips.css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$tooltips.css('display', 'none');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -39,6 +39,7 @@
|
||||
<p class="icon-box__desc">用于表示等待</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="icon_sp_area">
|
||||
<i class="weui-icon-circle"></i>
|
||||
<i class="weui-icon-success"></i>
|
||||
@@ -63,6 +64,7 @@
|
||||
<i class="weui-icon-back"></i>
|
||||
<i class="weui-icon-back-circle"></i>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div class="page__ft">
|
||||
<a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
|
||||
|
||||
@@ -17,6 +17,14 @@
|
||||
<link rel="import" href="./fragment/list.html">
|
||||
<link rel="import" href="./fragment/input.html">
|
||||
<link rel="import" href="./fragment/form.html">
|
||||
<link rel="import" href="./fragment/form_page.html">
|
||||
<link rel="import" href="./fragment/form_input_status.html">
|
||||
<link rel="import" href="./fragment/form_vcode.html">
|
||||
<link rel="import" href="./fragment/form_checkbox.html">
|
||||
<link rel="import" href="./fragment/form_radio.html">
|
||||
<link rel="import" href="./fragment/form_switch.html">
|
||||
<link rel="import" href="./fragment/form_select.html">
|
||||
<link rel="import" href="./fragment/form_textarea.html">
|
||||
<link rel="import" href="./fragment/toast.html">
|
||||
<link rel="import" href="./fragment/dialog.html">
|
||||
<link rel="import" href="./fragment/half-screen-dialog.html">
|
||||
|
||||
@@ -26,15 +26,16 @@
|
||||
mask-size:100%;
|
||||
background-color:currentColor;
|
||||
|
||||
&:before{
|
||||
// 平滑升级
|
||||
display: inline-block;
|
||||
margin-left: .2em;
|
||||
margin-right: .2em;
|
||||
}
|
||||
// 平滑升级
|
||||
//&:not([class^="weui-icon_"]):not([class*=" weui-icon_"]){
|
||||
// font-size:14px;
|
||||
// margin-left: .2em;
|
||||
// margin-right: .2em;
|
||||
//}
|
||||
}
|
||||
|
||||
|
||||
// icon map
|
||||
.weui-icon-circle{
|
||||
mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
@@ -111,6 +112,7 @@
|
||||
mask-image:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm0-1.2a8.8%208.8%200%20100-17.6%208.8%208.8%200%20000%2017.6zm1.999-5.363L12.953%2016.5%209.29%2012.723a1.045%201.045%200%20010-1.446L12.953%207.5%2014%208.563%2010.68%2012%2014%2015.438z%22%2F%3E%3C%2Fsvg%3E);
|
||||
}
|
||||
|
||||
// icon setting
|
||||
.weui-icon-success {
|
||||
color: @weuiColorPrimary;
|
||||
}
|
||||
@@ -141,7 +143,7 @@
|
||||
}
|
||||
|
||||
.weui-icon-info-circle {
|
||||
color: @weuiColorPrimary;
|
||||
color: @weuiTextColorTips;
|
||||
}
|
||||
|
||||
.weui-icon-safe-success {
|
||||
|
||||
@@ -81,6 +81,11 @@ z-index:
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:not(.weui-cell_readonly):not(.weui-cell_disabled){
|
||||
&:active{
|
||||
background-color:#ECECEC;
|
||||
}
|
||||
}
|
||||
}
|
||||
.weui-cell_primary{
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -104,6 +104,9 @@
|
||||
}
|
||||
.weui-cell_select-after{
|
||||
padding-left:32px;
|
||||
.weui-select{
|
||||
padding-left:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -37,32 +37,17 @@
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
&:disabled{
|
||||
opacity:1;
|
||||
-webkit-text-fill-color:@weuiTextColorDesc;
|
||||
}
|
||||
&[disabled],
|
||||
&[readonly]{
|
||||
color:@weuiTextColorDesc;
|
||||
}
|
||||
}
|
||||
.weui-textarea {
|
||||
display: block;
|
||||
border: 0;
|
||||
resize: none;
|
||||
background:transparent;
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
font-size: 1em;
|
||||
line-height: inherit;
|
||||
outline: 0;
|
||||
&:disabled{
|
||||
opacity:1;
|
||||
-webkit-text-fill-color:@weuiTextColorDesc;
|
||||
}
|
||||
&[disabled],
|
||||
&[readonly]{
|
||||
color:@weuiTextColorDesc;
|
||||
}
|
||||
}
|
||||
|
||||
.weui-textarea-counter{
|
||||
@@ -106,3 +91,15 @@
|
||||
color:@weuiTextColorWarn;
|
||||
.weui-icon-warn{display:inline-block;}
|
||||
}
|
||||
.weui-cell_readonly,.weui-cell_disabled{
|
||||
.weui-input,.weui-textarea {
|
||||
&:disabled{
|
||||
opacity:1;
|
||||
-webkit-text-fill-color:@weuiTextColorDesc;
|
||||
}
|
||||
&[disabled],
|
||||
&[readonly]{
|
||||
color:@weuiTextColorDesc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user