――――――――――弹出框方法―――――――――――――――――
1.layer.open(options) - 原始核心方法
layer.open ({ type : 1, title : '测试', id: 'myp', btn: ['确认','删除'], area: ['420px', '240px'], //宽高 content : '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><input type="te" />你知道吗?亲!<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块,由于其用户基数较大,所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块,但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>', success : function (layero,index) { var btn = layero.find('.layui-layer-btn0'); console.log(btn) }, yes: function(index, layero){ console.log(index) layer.close(index); //如果设定了yes回调,需进行手工关闭 }, cancel: function(){ layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6}); } })
2.layer.alert(content, options, yes) - 普通信息框
//eg1 layer.alert('只想简单的提示'); //eg2 layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。 //eg3 layer.alert('有了回调', function(index){ //do something layer.close(index); });
3.layer.confirm(content, options, yes, cancel) - 询问框
//eg1 layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){ //do something layer.close(index); }); //eg2 layer.confirm('is not?', function(index){ //do something layer.close(index); });
4.layer.msg(content, options, end) - 提示框
//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 });
5.layer.load(icon, options) - 加载层
//eg1 var index = layer.load(); //eg2 var index = layer.load(1); //换了种风格 //eg3 var index = layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒 //关闭 layer.close(index);
6.layer.tips(content, follow, options) - tips层
//eg1 layer.tips('只想提示地精准些', '#id'); //eg 2 $('#id').on('click', function(){ var that = this; layer.tips('只想提示地精准些', that); //在元素的事件回调体中,follow直接赋予this即可 }); //eg 3 layer.tips('在上面', '#id', { tips: 1 });
7.layer.prompt(options, yes) - 输入层
//prompt层新定制的成员如下 { formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本) value: '', //初始时的值,默认空字符 maxlength: 140, //可输入文本的最大长度,默认500 } //例子1 layer.prompt(function(value, index, elem){ alert(value); //得到value layer.close(index); }); //例子2 layer.prompt({ formType: 2, value: '初始值', title: '请输入值', area: ['800px', '350px'] //自定义文本域宽高 }, function(value, index, elem){ alert(value); //得到value layer.close(index); });
8.layer.tab(options) - tab层
layer.tab({ area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '内容1' }, { title: 'TAB2', content: '内容2' }, { title: 'TAB3', content: '内容3' }] });
9.layer.photos(options) - 相册层
$.getJSON('/jquery/layer/test/photos.json', function(json){ layer.photos({ photos: json ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数) }); });
返回数据格式如下: { "title": "", //相册标题 "id": 123, //相册id "start": 0, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "alt": "图片名", "pid": 666, //图片id "src": "", //原图地址 "thumb": "" //缩略图地址 } ] }