layerui下载:http://www.layui.com
更多参数请阅读开发文档：http://www.layui.com/doc/modules/layer.html
Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发
1.引入js 和css
|
1
2
3
|
<script type="text/javascript" src="jquery-1.9.0.min.js"></script><script type="text/javascript" src="layui.all.js"></script><link rel="stylesheet" href="css/layui.css"> |
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>layer</title> <script type="text/javascript" src="jquery-1.9.0.min.js"></script> <script type="text/javascript" src="layui.all.js"></script> <link rel="stylesheet" href="css/layui.css"></head><body><div id="one"> <input type="button" value="确定"> <input id="b3" type="button" value="确定"></div><script> // layer.msg('hello'); // layer.msg('不开心。。', {icon: 5});// layer.confirm('纳尼？', {//自定义弹出框// btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮// , btn3: function (index, layero) {// //按钮【按钮三】的回调// alert(333)// }// }, function (index, layero) {// //按钮【按钮一】的回调// alert(111)// }, function (index) {// //按钮【按钮二】的回调// alert(222)// }); $('input').click(function () { layer.open({ id:0,//用于控制弹层唯一标识 area: ['600px', '400px'],// offset: 'lt',//设置弹出框的位置 type:2,//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外） closeBtn:1,//设置关闭按钮默认1 可设置参数0 1 2 shade:0.3,//遮罩 ：0.3 shadeClose:false,//是否点击遮罩关闭 ,默认false// time:5000,//自动关闭所需毫秒 默认：0 默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭， anim:0,//弹出动画目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数 isOutAnim:true,//关闭动画 （layer 3.0.3新增） 默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可 maxmin:false,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可 fixed:true,//即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可 resize:false,//默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效 scrollbar:true,//是否允许浏览器出现滚动条 默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽 maxWidth:500,//默认：360 请注意：只有当area: 'auto'时，maxWidth的设定才有效。 maxHeight:800,// 默认：无 请注意：只有当高度自适应时，maxHeight的设定才有效。 zIndex:19891014,//默认：19891014 一般用于解决和其它组件的层叠冲突。 move:'.layui-layer-title',// 触发拖动的元素 默认：'.layui-layer-title' 默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽// yes:function (index, layero) {//确定按钮回调方法 该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：// alert("确定后要做的事情");// layer.close(index); //如果设定了yes回调，需进行手工关闭// }, cancel:function (index, layero) {//右上角关闭按钮触发的回调 该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可 if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭 设置 type:2 closeBtn:2, layer.close(index) } return false; }, resizing:function () { alert(111111) }, title: "查看文章", content: 'user.html',//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content:// success:function () {//层弹出后的成功回调方法// alert("窗口弹出成功了！");// } }); }); //方法大全 //layer.open(options) - 原始核心方法 //----------------------------------------------------------------------------------------------------- //1.layer.alert(content, options, yes) - 普通信息框 它的弹出似乎显得有些高调，一般用于对用户造成比较强烈的关注，类似系统alert， // 但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可// layer.alert('有了回调', function(index){// //do something// alert(1111);// layer.close(index);// }); //----------------------------------------------------------------------------------------------------- //2.layer.confirm(content, options, yes, cancel) - 询问框 类似系统confirm，但却远胜confirm， // 另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。// layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){// //do something//// layer.close(index);// }); //----------------------------------------------------------------------------------------------------- //3. layer.msg(content, options, end) - 提示框 我们在源码中用了相对较大的篇幅来定制了这个msg， // 目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。 // 因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。 // 因此我赋予了它许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。 //eg1// layer.msg('只想弱弱提示'); //eg2// layer.msg('有表情地提示', {icon: 6}); //eg3// layer.msg('关闭后想做些什么', function(){// //do something// }); //eg// layer.msg('同上', {// icon: 1,// time: 2000 //2秒关闭（如果不配置，默认是3秒）// }, function(){// //do something// }); //----------------------------------------------------------------------------------------------------- //4.layer.load(icon, options) - 加载层 type:3的深度定制。load并不需要你传太多的参数，但如果你不喜欢默认的加载风格， // 你还有选择空间。icon支持传入0-2如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。 //eg1// var index = layer.load(); //eg2// var index = layer.load(1); //换了种风格 //eg3// var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 //关闭// layer.close(index); //----------------------------------------------------------------------------------------------------- //layer.tips(content, follow, options) - tips层 type:4的深度定制。也是我本人比较喜欢的一个层类型， // 因为它拥有和msg一样的低调和自觉，而且会智能定位，即灵活地判断它应该出现在哪边。默认是在元素右边弹出 //eg1// layer.tips('只想提示地精准些', '#b3'); //eg 2// $('#b3').on('click', function(){// var that = this;// layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可// }); //eg 3// layer.tips('在上面', '#b3', {// tips: 1// }); //----------------------------------------------------------------------------------------------------- //layer.prompt(options, yes) - 输入层 prompt的参数也是向前补齐的。options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然， // 也可以不传。yes携带value 表单值index 索引elem 表单元素// layer.prompt(function(value, index, elem){// alert(value); //得到value// layer.close(index);// }); //----------------------------------------------------------------------------------------------------- //layer.tab(options) - tab层 tab层只单独定制了一个成员，即tab: []，例子// layer.tab({// area: ['600px', '300px'],// tab: [{// title: 'TAB1',// content: '内容1'// }, {// title: 'TAB2',// content: '内容2'// }, {// title: 'TAB3',// content: '内容3'// }]// }); //----------------------------------------------------------------------------------------------------- //layer.setTop(layero) -置顶当前窗口 非常强大的一个方法，虽然一般很少用。但是当你的页面有很多很多layer窗口， // 你需要像Window窗体那样，点击某个窗口，该窗体就置顶在上面，那么setTop可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优// layer.open({// type: 2,// shade: false,// area: '500px',// maxmin: true,// content: 'http://www.layui.com',// zIndex: layer.zIndex, //重点1// success: function(layero){// layer.setTop(layero); //重点2// }// });</script></body></html> |