-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
121 lines (116 loc) · 2.45 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金帛移动端ui</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="./css/m-ui.css">
<style>
body {
background: #f04a3a;
}
button {
margin: 10px;
}
.test {
width: 80%;
padding: 10px 20px;
background: #fff;
border-radius: 3px;
}
.test .title {
color: #333;
font-size: 15px;
text-align: center;
line-height: 30px;
}
.test .text {
color: #f90;
font-size: 12px;
line-height: 30px;
}
.test .btn-group {
height: 40px;
text-align: center;
}
.test .btn-group .btn {
display: inline-block;
min-width: 80px;
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #f00;
color: #f00;
border-radius: 3px;
}
</style>
</head>
<body>
<button id="dialog">dialog</button>
<button id="message">message</button>
<button id="error">error</button>
<button id="loading">loading</button>
<button id="smLoading">smLoading</button>
<button id="other">自定义</button>
<div class="test">
<div class="title">自定义弹窗</div>
<div class="text">我是内容内容</div>
<div class="btn-group">
<a href="#" class="btn">按钮1</a>
<a href="#" class="btn">按钮2</a>
</div>
</div>
<script src="./js/zepto.min.js"></script>
<script src="./js/m-ui.js"></script>
<script>
$("#dialog").on("click", function() {
ui.dialog({
data: {
text: "测试测试"
}
});
});
$("#message").on("click", function() {
ui.message("message");
});
$("#error").on("click", function() {
ui.error("error");
});
$("#loading").on("click", function() {
ui.loading("loading");
});
$("#smLoading").on("click", function() {
ui.smLoading("smLoading");
});
$("#other").on("click", function() {
ui.dialog({
content: '<div class="test ui-center">' +
'<div class="title">{{title}}</div>' +
'<div class="text">{{text}}</div>' +
'<div class="btn-group">' +
'{{btnContent}}' +
'</div>' +
'</div>', // String 弹出弹窗的内容
data: {
title: "测试标题",
text: "测试内容",
btn: [{
text: "确认",
"data-type": "close",
"class": "btn",
id: "btn1"
}, {
text: "取消",
"data-type": "close",
"class": "btn",
id: "btn2"
}]
}, // String 弹出弹窗的文案
needOverlay: true, // Boolean 是否添加遮罩层
autoClose: 0, // Number 自动关闭弹出窗时间,0为不自动关闭
afterInit: null,
callback: null // Function 关闭弹出层执行的回调函数
});
});
</script>
</body>
</html>