-
Notifications
You must be signed in to change notification settings - Fork 6.4k
/
form_switch.html
69 lines (65 loc) · 2.81 KB
/
form_switch.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
<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>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells">
<label for="cb" class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd" id="cb_txt" aria-hidden="true">标题文字</div>
<div class="weui-cell__ft">
<input aria-labelledby="cb_txt" id="cb" class="weui-switch" type="checkbox"/>
</div>
</label>
<label for="cb1" class="weui-cell weui-cell_active weui-cell_disabled weui-cell_switch">
<div class="weui-cell__bd" id="cb1_txt" aria-hidden="true">标题文字</div>
<div class="weui-cell__ft">
<input aria-labelledby="cb1_txt" id="cb1" disabled class="weui-switch" checked type="checkbox"/>
</div>
</label>
<label for="switchCP" class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd" id="cp_txt" aria-hidden="true">兼容IE Edge的版本</div>
<div class="weui-cell__ft">
<span class="weui-switch-cp">
<input id="switchCP" aria-labelledby="cp_txt" class="weui-switch-cp__input" type="checkbox" checked="checked"/>
<div class="weui-switch-cp__box"></div>
</span>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
<div id="js_toast" style="display: none;" role="alert">
<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 $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
});
});
</script>