-
Notifications
You must be signed in to change notification settings - Fork 6.4k
/
Copy pathform_page.html
106 lines (103 loc) · 4.38 KB
/
form_page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<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">
<label for="js_input1" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" placeholder="填写本人微信号"/>
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">昵称</span></div>
<div class="weui-cell__bd">
<input id="js_input2" class="weui-input" placeholder="填写本人微信号的昵称"/>
</div>
</label>
<label for="js_input3" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">联系电话</span><div class="weui-cell__desc">副标题</div></div>
<div class="weui-cell__bd">
<input id="js_input3" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />
</div>
</label>
<label for="js_input4" class="weui-cell weui-cell_active weui-cell_primary">
<div class="weui-cell__hd"><span class="weui-label" lang="en">verification address</span></div>
<div class="weui-cell__bd">
<textarea class="weui-textarea" id="js_input4" placeholder="input your address" rows="3"></textarea>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__tips-area">
<p class="weui-form__tips">
表单页提示，居中对齐
</p>
</div>
<div class="weui-form__opr-area">
<a role="button" disabled aria-disabled="true" class="weui-btn weui-btn_primary weui-btn_disabled" 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:" class="weui-footer__link">底部链接文本</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
</div>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $toast = $('#js_toast');
var $input = $('#js_input');
$input.on('input', function(){
if ($input.val()){
$('#showTooltips').removeClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','false');
$('#showTooltips').removeAttr('disabled');
}else{
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','true');
$('#showTooltips').addAttr('disabled');
}
});
$('#showTooltips').on('click', function(){
if ($(this).hasClass('weui-btn_disabled')) return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.attr('aria-live','assertive');
$toast.fadeIn(100);
setTimeout(function () {
$toast.attr('aria-live','off');
$toast.fadeOut(100);
}, 2000);
});
//$('.weui-cell').on('click', function(){
// $(this).find('input').trigger('focus');
//});
});
</script>