前端ui框架layui――layer弹出层-弹出框方法

匿名 (未验证) 提交于 2019-12-03 00:27:02

――――――――――弹出框方法―――――――――――――――――

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": "" //缩略图地址     }   ] }
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!