-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
213 lines (206 loc) · 7.11 KB
/
index.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>xDialog</title>
<link rel="stylesheet" href="xDialog.css">
<style type="text/css">
body,div,p,h1,h3,h4,ul{margin:0;padding:0}
body{background:#403d35;color:#403d35;font-family: 微软雅黑,arial,sans-serif;font-size:16px }
#wrap{margin: 0 auto;width: 1000px;background:#FFF;}
.p20{padding:20px}
.h{background:#fff4d6;text-align:center;padding: 5px 0;margin-bottom: 20px;}
.tr{text-align:right}
#wrap .header{margin-bottom: 20px;}
#wrap .desc{padding: 5px;opacity: 0.6;}
pre{border-radius: 3px;border:1px solid #CCC;background:#F5F5F5;font-family:verdana}
.tb{border-collapse: collapse;border: 1px solid #CCCCCC;width:100%}
.tb td{border: 1px solid #CCC;}
a{text-decoration: none;}
</style>
</head>
<body>
<div id="wrap">
<div class="p20">
<div class="header">
<h1>X - Dialog 轻量级弹出层</h1>
<div class="desc">—— xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口，压缩后大小仅2K左右。<a href="https://github.com/haichong0813/xDialog" target="_blank">github</a></div>
</div>
<div class="main">
<h3 class="h">示例演示</h3>
<h4>1、简单调用</h4>
<pre class="x1">
$.xDialog({
title:'温馨提示',
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。'
});
</pre>
<p class="tr"><input type="button" id='x1' class="g-button green" value="运行"></p>
<h4>2、传入HTMLElement</h4>
<pre class="x2">
$.xDialog({
title:'温馨提示',
content:document.getElementById('el') //支持JQuery对象，$('#el')。支持HTML字符串。
});
</pre>
<p class="tr"><input type="button" id='x2' class="g-button green" value="运行"></p>
<h4>3、设置高度宽度</h4>
<pre class="x3">
$.xDialog({
title:'温馨提示',
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。',
width:300,
height:200
});
</pre>
<p class="tr"><input type="button" id='x3' class="g-button green" value="运行"></p>
<h4>4、确定取消按钮</h4>
<pre class="x4">
$.xDialog({
title:'温馨提示',
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。',
ok:function(){
alert('ok');
},
cancel:function(){
alert('cancel');
}
});
</pre>
<p class="tr"><input type="button" id="x4" class="g-button green" value="运行"></p>
<h4>5、提示层</h4>
<pre class="x5">
$.xDialog({
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。',
type:'tips',
time:3
});
</pre>
<p class="tr"><input type="button" id='x5' class="g-button green" value="运行"></p>
<h4>6、扩展方法</h4>
<pre class="x6">
var art = $.xDialog({
show:false
});
art.title('温馨提示').content('小巧，灵活，简洁，高效').open();
</pre>
<p class="tr"><input type="button" id='x6' class="g-button green" value="运行"></p>
<br>
<h3 class="h">参数列表</h3>
<table border=1 cellpadding=5 cellspacing=0 class="tb">
<tr style="background:#403D35;color:#FFF">
<td>名称</td><td>类型</td><td width="10%">默认值</td><td>描述</td>
</tr>
<tr>
<td>title</td><td>String</td><td> </td><td>标题内容</td>
</tr>
<tr>
<td>content</td><td>String/HTMLElement</td><td> </td><td>如果传入的是HTMLElement类型，隐藏元素会自动显示。</td>
</tr>
<tr>
<td>width</td><td>Number</td><td>auto</td><td>设置消息内容宽度。一般不用设置，自适应。</td>
</tr>
<tr>
<td>height</td><td>Number</td><td>auto</td><td>设置消息内容高度，一般不用设置，自适应。</td>
</tr>
<tr>
<td>opacity</td><td>Number</td><td>0.7</td><td>锁屏遮罩透明度，false为不显示遮罩</td>
</tr>
<tr>
<td>show</td><td>Boolean</td><td>true</td><td>是否显示弹出层</td>
</tr>
<tr>
<td>overlayClose</td><td>Boolean</td><td>true</td><td>点击遮罩层是否可以关闭</td>
</tr>
<tr>
<td>overlayColor</td><td>String</td><td>#FFF</td><td>遮罩层颜色</td>
</tr>
<tr>
<td>ok</td><td>function</td><td>null</td><td>确定按钮回调函数，函数如果返回false将阻止弹出层关闭</td>
</tr>
<tr>
<td>cancel</td><td>function/Boolean</td><td>true</td><td>取消按钮回调函数，如果为true，调用默认关闭事件，函数如果返回false将阻止弹出层关闭</td>
</tr>
<tr>
<td>type</td><td>String</td><td>null</td><td>消息类型：tips</td>
</tr>
<tr>
<td>time</td><td>Number</td><td>true</td><td>多少秒后关闭弹出层</td>
</tr>
</table>
<br>
<h3 class="h">扩展方法</h3>
<table border=1 cellpadding=5 cellspacing=0 class="tb">
<tr style="background:#403D35;color:#FFF">
<td width="20%">名称</td><td>描述</td>
</tr>
<tr>
<td>open()</td><td>打开弹出层</td>
</tr>
<tr>
<td>close()</td><td>关闭弹出层</td>
</tr>
<tr>
<td>setTitle(string)</td><td>设置标题</td>
</tr>
<tr>
<td>setContent(string)</td><td>设置内容</td>
</tr>
</table>
</div>
<div id="el" style="display:none">
Hello World！
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="xDialog.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$('#x1').click(function(){
$.xDialog({
title:'温馨提示',
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。'
});
});
$('#x2').click(function(){
$.xDialog({
title:'温馨提示',
content:document.getElementById('el'),
opacity:false
});
});
$('#x3').click(function(){
$.xDialog({
title:'温馨提示',
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。',
width:300,
height:200
});
});
$('#x4').click(function(){
$.xDialog({
title:'温馨提示',
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。',
ok:function(){
alert("ok");
},
cancel:function(){
alert("cancel");
}
});
});
$('#x5').click(function(){
$.xDialog({
content:'xDialog是一个JQuery弹出层插件，它拥有简单的界面和友好的接口。',
type:'tips'
});
});
$('#x6').click(function(){
var art = $.xDialog({
show:false
});
art.setTitle('温馨提示').setContent('小巧，灵活，简洁，高效').open();
});
</script>
</body>
</html>