demo.html
4.25 KB
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<style>
html {
background-color: #E3E3E3;
font-size: 14px;
color: #000;
font-family: '微软雅黑'
}
a,a:hover {
text-decoration: none;
}
pre {
font-family: '微软雅黑'
}
.box {
padding: 20px;
background-color: #fff;
margin: 50px 100px;
border-radius: 5px;
}
.box a {
padding-right: 15px;
}
#about_hide {
display: none
}
.layer_text {
background-color: #fff;
padding: 20px;
}
.layer_text p {
margin-bottom: 10px;
text-indent: 2em;
line-height: 23px;
}
.button {
display: inline-block;
*display: inline;
*zoom: 1;
line-height: 30px;
padding: 0 20px;
background-color: #56B4DC;
color: #fff;
font-size: 14px;
border-radius: 3px;
cursor: pointer;
font-weight: normal;
}
.photos-demo img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<pre>
@Name：layer-v<script>document.write(layer.v)</script> 弹层组件说明
@Author：贤心
@Site：<a href="http://layer.layui.com/?form=local" target="_blank">http://layer.layui.com</a>
@Github：<a href="https://github.com/sentsin/layer" target="_blank">https://github.com/sentsin/layer</a>
<strong>【注意事项】</strong>
一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
三、jQuery最低要求1.8
四、更多使用说明与演示，请参见layer官网。
五、请勿用于虚假诈骗、及违反我国法律的Web平台。这一点非常重要非常的重要！
六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。
</pre>
</div>
<div class="box">
<h2 style="padding-bottom: 20px;">扩展模块：图片查看器（相册层）</h2>
<div id="photosDemo" class="photos-demo">
<!-- layer-src表示大图 layer-pid表示图片id src表示缩略图-->
<img
layer-src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg"
layer-pid=""
src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg"
alt="layer宣传图"> <img
layer-src="http://sentsin.qiniudn.com/sentsinmy5.jpg" layer-pid=""
src="http://sentsin.qiniudn.com/sentsinmy5.jpg" alt="我入互联网这五年">
<img layer-src="" layer-pid=""
src="http://sentsin.qiniudn.com/sentsin_39101a660cf4671b7ec297a74cc652c74152104f.jpg"
alt="微摄影"> <img
layer-src="http://sentsin.qiniudn.com/sentsinsan01.jpg" layer-pid=""
src="http://sentsin.qiniudn.com/sentsinsan01.jpg" alt="三清山"> <img
layer-src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg"
layer-pid=""
src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg"
alt="国足">
</div>
</div>
<div class="box" style="text-align: center">
<a href="http://layer.layui.com/?form=local" target="_blank">更多示例</a>
<a href="http://layer.layui.com/api.html" target="_blank">使用文档</a> <a
href="http://fly.layui.com" target="_blank" title="Fly">交流反馈</a> <a
href="javascript:;" id="about">关于</a>
</div>
<script>
;!function(){
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
layer.ready(function(){
//官网欢迎页
layer.open({
type: 2,
//skin: 'layui-layer-lan',
title: 'layer弹层组件',
fix: false,
shadeClose: true,
maxmin: true,
area: ['1000px', '500px'],
content: 'http://layer.layui.com/?form=local',
end: function(){
layer.tips('试试相册模块？', '#photosDemo', {tips: 1})
}
});
//layer.msg('欢迎使用layer');
//使用相册
layer.photos({
photos: '#photosDemo'
});
});
//关于
$('#about').on('click', function(){
layer.alert(layer.v + ' - 贤心出品');
});
}();
</script>
</body>
</html>