-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathlayer.html
145 lines (142 loc) · 4.39 KB
/
layer.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>miniMobile</title>
<meta name="keywords" content="miniMobile的demo" />
<meta name="description" content="miniMobile是一个简单易用的移动框架！" />
<!-- miniMObile.css、js -->
<link rel="stylesheet" type="text/css" href="css/miniMobile.css"/>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/miniMobile.js"></script>
<!-- fonticon -->
<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
<!-- layer -->
<script type="text/javascript" src="plugins/layer_mobile/layer.js"></script>
<!-- animate.css -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
</head>
<body class="pb12 fadeIn animated">
<header class="ui-header clearfix w75 pl3 pr3 h8 f46 color8 bg-color-primary t-c">
<div class="ui-header-l fl w5">
<a href="index.html" class="icon color8 iconfont icon-home_light"></a>
</div>
<div class="ui-header-c fl f30 w59">
Layer For Mobile
</div>
<div class="ui-header-r fr w5">
<i class="icon iconfont icon-phone"></i>
</div>
</header>
<br /><br />
<div class="p3 f30">
<span class="p2 mb4 btn radius5 btn-primary">信息框</span>
<span class="p2 mb4 btn radius5 btn-success">提示</span>
<span class="p2 mb4 btn radius5 btn-info">询问层</span>
<span class="p2 mb4 btn radius5 btn-warning">底部对话框</span>
<span class="p2 mb4 btn radius5 btn-danger">底部提示</span>
<span class="p2 mb4 btn radius5 btn-primary">自定义标题风格</span>
<span class="p2 mb4 btn radius5 btn-success">页面层</span>
<span class="p2 mb4 btn radius5 btn-info">loadding层</span>
<span class="p2 mb4 btn radius5 btn-warning">加载层</span>
<span class="p2 mb4 btn radius5 btn-primary">底部弹出完整对话框</span>
</div>
<script type="text/javascript">
//简单的信息层
$(".btn").eq(0).click(function() {
layer.open({
content: '简单的提示信息',
btn: '我知道了'
});
})
//提示层msg
$(".btn").eq(1).click(function() {
layer.open({
content: 'hello layer',
skin: 'msg',
time: 2 //2秒后自动关闭
});
})
//询问层
$(".btn").eq(2).click(function() {
layer.open({
content: '您确定要刷新一下本页面吗？',
btn: ['刷新', '不要'],
yes: function(index) {
location.reload();
layer.close(index);
}
});
})
//底部询问层
$(".btn").eq(3).click(function() {
layer.open({
content: '这是一个底部弹出的询问提示',
btn: ['删除', '取消'],
skin: 'footer',
yes: function(index) {
layer.open({
content: '执行删除操作'
})
}
});
})
//底部提示层
$(".btn").eq(4).click(function() {
layer.open({
content: '一个没有任何按钮的底部提示',
skin: 'footer'
});
})
//自定义标题风格层
$(".btn").eq(5).click(function() {
layer.open({
title: [
'我是标题',
'background-color: #FF4351; color:#fff;'
],
content: '标题风格任你定义。'
});
})
//页面层
$(".btn").eq(6).click(function() {
layer.open({
type: 1,
content: '可传入任何内容，支持html。一般用于手机页面中',
anim: 'up',
style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
});
})
//loadding 层
$(".btn").eq(7).click(function() {
layer.open({
type: 2
});
})
//加载层
$(".btn").eq(8).click(function() {
layer.open({
type: 2,
content: '加载中'
});
})
//底部弹出的完整对话框
$(".btn").eq(9).click(function() {
layer.open({
title: [
'我是标题',
'background-color:#8DCE16; color:#fff;'
],
anim: 'up',
content: '展现的是全部结构',
btn: ['确认', '取消']
});
})
</script>
</body>
</html>