layer-demo.js
5.24 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
/*! layer demo */ ;
! function () {
var gather = {
htdy: $('html, body')
};
//一睹为快
gather.demo1 = $('#demo1');
$('#chutiyan>a').on('click', function () {
var othis = $(this),
index = othis.index();
var p = gather.demo1.children('p').eq(index);
var top = p.position().top;
gather.demo1.animate({
scrollTop: gather.demo1.scrollTop() + top
}, 0);
switch (index) {
case 0:
var icon = -1;
(function changeIcon() {
var index = parent.layer.alert('点击确认更换图标', {
icon: icon,
shadeClose: true,
title: icon === -1 ? '初体验' : 'icon：' + icon
}, changeIcon);
if (8 === ++icon) layer.close(index);
}());
break;
case 1:
var icon = 0;
(function changeIcon1() {
var index = parent.layer.alert('点击确认更换图标', {
icon: icon,
shadeClose: true,
skin: 'layer-ext-moon',
shift: 5,
title: icon === -1 ? '第三方扩展皮肤' : 'icon：' + icon
}, changeIcon1);
if (9 === ++icon) {
parent.layer.confirm('怎么样，是否很喜欢该皮肤，去下载？', {
skin: 'layer-ext-moon'
}, function (index, layero) {
layero.find('.layui-layer-btn0').attr({
href: 'http://layer.layui.com/skin.html',
target: '_blank'
});
parent.layer.close(index);
});
};
}());
break;
case 6:
parent.layer.open({
type: 1,
area: ['420px', '240px'],
skin: 'layui-layer-rim', //加上边框
content: '<div style="padding:20px;">即直接给content传入html字符<br>当内容宽高超过定义宽高，会自动出现滚动条。<br><br><br><br><br><br><br><br><br><br><br>很高兴在下面遇见你</div>'
});
break;
case 7:
parent.layer.open({
type: 1,
skin: 'layui-layer-demo',
closeBtn: false,
area: '350px',
shift: 2,
shadeClose: true,
content: '<div style="padding:20px;">即传入skin:"样式名"，然后你就可以为所欲为了。<br>你怎么样给她整容都行<br><br><br>我是华丽的酱油==。</div>'
});
break;
case 8:
layer.tips('Hi，我是tips', this);
break;
case 11:
var ii = parent.layer.load(0, {
shade: false
});
setTimeout(function () {
parent.layer.close(ii)
}, 5000);
break;
case 12:
var iii = parent.layer.load(1, {
shade: [0.1, '#fff']
});
setTimeout(function () {
parent.layer.close(iii)
}, 3000);
break;
case 13:
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', this, {
tips: [1, '#3595CC'],
time: 4000
});
break;
case 14:
parent.layer.prompt({
title: '输入任何口令，并确认',
formType: 1
}, function (pass) {
parent.layer.prompt({
title: '随便写点啥，并确认',
formType: 2
}, function (text) {
parent.layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
});
});
break;
case 15:
parent.layer.tab({
area: ['600px', '300px'],
tab: [{
title: '无题',
content: '<div style="padding:20px; line-height:30px; text-align:center">欢迎体验layer.tab<br>此时此刻不禁让人吟诗一首：<br>一入前端深似海<br>从此妹纸是浮云<br>以下省略七个字<br>。。。。。。。<br>——贤心</div>'
}, {
title: 'TAB2',
content: '<div style="padding:20px;">TAB2该说些啥</div>'
}, {
title: 'TAB3',
content: '<div style="padding:20px;">有一种坚持叫：layer</div>'
}]
});
break;
case 16:
if (gather.photoJSON) {
layer.photos({
photos: gather.photoJSON
});
} else {
$.getJSON('js/demo/photos.json?v=', function (json) {
gather.photoJSON = json;
layer.photos({
photos: json
});
});
}
break;
default:
new Function(p.text())();
break;
}
});
}();