弹出层layer的使用

弹出层layer的使用

弹出层layer的使用

Intro

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'

}]

});

More

常用功能示例代码:下载示例代码

更多详情查看 这里

相关数据