导读 | layer是一款web弹层组件,致力于服务各个水平段的开发人员。layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您的页面拥有更丰富与便捷的操作体验,而您只需在调用时简单地配置相关参数,即可轻松实现。 |
layer.msg
语法:layer.msg(content[, options][, end])
提示框
layer.msg('这里是msg内容'); layer.msg('这里是msg内容',{icon:1}); layer.msg('关闭后想做些什么', function(){ //do something }); layer.msg('同上', { icon: 1, time: 2000 //2秒关闭(如果不配置,默认是3秒) }, function(){ //do something });
layer.alert
语法:layer.alert(content[, options][, yes])
普通信息框
//eg1 layer.alert('只想简单的提示'); //eg2 layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。 //eg3 layer.alert('有了回调', function(index){ //do something layer.close(index); });
layer.confirm
语法: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); });
layer.propmt
语法: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: '这里是title' }, function(value, index, elem){ alert(value); //得到value layer.close(index); });
layer.open
语法:layer.open(options)
原始核心方法
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数,另外,该文档统一采用options作为基础参数的标识
//example1: var index = layer.open({ content: 'test' }); //拿到的index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数。 //example2 layer.open({ type: 1 //Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) ,title: 'title here' ,area: ['390px', '330px'] ,shade: 0.4 ,content: $("#test") //支持获取DOM元素 ,btn: ['yes', 'close'] //按钮 ,scrollbar: false //屏蔽浏览器滚动条 ,yes: function(index){ //layer.msg('yes'); layer.close(index); showToast(); } ,btn2: function(){ //layer.alert('aaa',{title:'msg title'}); layer.msg('bbb'); //layer.closeAll(); } });
layer.load
语法:layer.load(icon, options)
加载层
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.tab
语法:layer.tab(options)
tab层
layer.tab({ area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '内容1' }, { title: 'TAB2', content: '内容2' }, { title: 'TAB3', content: '内容3' }] });
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/126400.html