文档章节

layui学习笔记——layer弹出层

一个yuanbeth
 一个yuanbeth
发布于 2017/09/07 21:30
字数 1395
阅读 375
收藏 2

一、基础参数

1layer:open基础参数

      layer.open({
    	  type: 1//基本层类型:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
    	 ,title:'新增'//标题:三种类型:(1)title :'我是标题'   (2)title: ['文本', 'font-size:18px;'] (3) title: false
    	 ,content: '好' //content:这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
    	 ,skin: ''  //样式类名 :自定义弹出框样式
    	 ,area: ['500px', '300px'] //宽高:定义高度和宽度,不定义将自适应,可以只定义一个
    	 ,offset: 'rt'  //坐标:默认垂直水平居中
         ,btn: ['按钮一', '按钮二', '按钮三']//按钮:可以是多个
         ,closeBtn: 1 //关闭按钮:配置1和2来展示,如果不显示,则closeBtn: 0
         ,shade: [0.8, '#393D49'] //遮罩:shade: [0.8, '#393D49'];如果不想显示遮罩,可以shade: 0
         ,shadeClose:true //是否点击遮罩关闭:true表示点击遮罩关闭,false表示点击遮罩不关闭,默认false
         ,time: 5000 //自动关闭所需毫秒:秒后自动关闭,默认不会自动关闭
         ,id:'123'//用于控制弹层唯一标识:设置该值后,不管是什么类型的层,都只允许同时弹出一个。一般用于页面层和iframe层模式
         ,anim:1 //弹出动画:支持的动画类型有0-6 如果不想显示动画,设置 anim: -1 即可
         ,isOutAnim:false//关闭动画 :关闭层时会有一个过度动画。如果不想开启,设置 isOutAnim: false 即可,默认true
         ,maxmin:true //最大最小化:该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可。默认false
         ,fixed:true //固定:即鼠标滚动时,层是否固定在可视区域。如果不想,设置fixed: false即可。默认为true
         ,resize:false //是否允许拉伸:默认情况下,可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 false即可。该参数对loading、tips层无效。默认为true
         ,resizing:function(layero){//监听窗口拉伸动作:当拖拽弹层右下角对窗体进行尺寸调整时,如果设定了该回调,则会执行。回调返回一个参数:当前层的DOM对象。默认为null
        	  console.log(layero);
         } 
         ,scrollbar:false//是否允许浏览器出现滚动条:默认允许浏览器滚动,如果设定scrollbar: false,则屏蔽
         ,maxWidth:300//最大宽度:设置弹出框最大宽度,只有当area: 'auto'时,maxWidth的设定才有效。
         ,maxHeight:300//最大高度:设置弹出框最大高度,只有当高度自适应时,maxHeight的设定才有效
         ,zIndex:199999//层叠顺序
         ,move:'.mine-move' //触发拖动的元素:如move: '.mine-move',表示可拖拽样式为mine-move的区域。配置设定move: false来禁止拖拽,默认'.layui-layer-title'
         ,moveOut:true//是否允许拖拽到窗口外:默认只能在窗口内拖拽,如果想让拖到窗外,那么设定moveOut: true即可
         ,moveEnd: function(layero){}//拖动完毕后的回调方法:其中layero为当前层的DOM对象,默认为null
         ,tips: [1, '#c00']//方向和颜色:支持上右下左四个方向,通过1-4进行方向设定,定义一些颜色,可以设定tips: [1, '#c00']
         ,tipsMore: true//层弹出后的成功回调方法:允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
         ,success: function(layero, index){//层弹出后的成功回调方法:当需要在层创建完毕时即执行一些语句,可以通过该回调,默认:null
        	    console.log(layero, index);//layero, index别是当前层DOM当前层索引
         }
         ,yes: function(index, layero){//确定按钮回调方法:该回调携带两个参数,分别为当前层索引、当前层DOM对象,默认:null
        	    //do something
        	    layer.close(index); //如果设定了yes回调,需进行手工关闭
        }
        ,cancel: function(index, layero){ //右上角关闭按钮触发的回调:该回调携带两个参数,分别为:当前层索引参数(index)、当前层的DOM对象(layero),默认会自动触发关闭。如果不想关闭,return false即可,默认:null
        	  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
        		    layer.close(index)
          }
        }
        ,end:function(){//层销毁后触发的回调:无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。默认:null
        	
        }
        ,full:function(layero){//full/min/restore -分别代表最大化、最小化、还原 后触发的回调,携带一个参数,即当前层DOM,默认:null
        	
        }
      });

2、按钮回调方法

//eg1       
layer.confirm('纳尼?', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});
 
//eg2
layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

二、核心函数

1、layer.config(options) - 初始化全局配置

(1)采用seajs或者requirejs加载layer

layer.config({//layer就会去加载一些它所需要的配件,比如css等。  
  path: '/res/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
});

(2)采用<script src="?a.js&layer.js">这种合并的方式引入layer

layer.config({//layer就不会去自动去获取路径,但你需要通过以下方式来完成初始化的配置
  path: '/res/layer/' //layer.js所在的目录,可以是绝对目录,也可以是相对目录
});

(3)layer.config(options) 可以配置层默认的基础参数,如:

layer.config({
  skin: 'layui-layer-molv' //默认皮肤
});

(4)除此之外,extend还允许你加载拓展的css皮肤,如:

layer.config({
  //如果是独立版的layer,则将myskin存放在./skin目录下
  //如果是layui中使用layer,则将myskin存放在./css/modules/layer目录下
  extend: 'myskin/style.css'
});

2、layer.ready(callback) - 初始化就绪

3、layer.alert(content, options, yes) - 普通信息框

layer.alert('只想简单的提示');        
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){
  //do something
  
  layer.close(index);
});       

4、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);
});       

5、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
});   

6、layer.load(icon, options) - 加载层

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);     

7、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
});

8、layer.close(index) - 关闭特定层

(1)当想关闭当前页的某个层时,每一种弹层调用方式,都会返回一个index

var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
layer.close(index); //此时只需要把获得的index,轻轻地赋予layer.close即可

(2)当在iframe页面关闭自身时

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭   

9、layer.closeAll(type) - 关闭所有层

layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层   

10、layer.style(index, cssStyle) - 重新定义层的样式

//重新给指定层设定width、top等
layer.style(index, {
  width: '1000px',
  top: '10px'
});       

11、layer.title(title, index) - 改变层的标题

12、layer.getChildFrame(selector, index) - 获取iframe页的DOM

layer.open({
  type: 2,
  content: 'test/iframe.html',
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
    console.log(body.html()) //得到iframe页的body内容
    body.find('input').val('Hi,我是从父页来的')
  }
});       

13、layer.getFrameIndex(windowName) - 获取特定iframe层的索引

//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭        

14、layer.iframeAuto(index) - 指定iframe层自适应

15、layer.iframeSrc(index, url) - //重置特定iframe url

16、layer.setTop(layero) -置顶当前窗口

17、layer.full()、layer.min()、layer.restore() - 手工执行最大小化

18、layer.prompt(options, yes) - 输入层

//例子2
layer.prompt({
  formType: 2,//输入框类型,支持0(文本)默认1(密码)2(多行文本)
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

19、layer.tab(options) - tab层

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
});      

20、layer.photos(options) - 相册层 (1)photos为传入json

$.getJSON('/jquery/layer/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
  });
}); 

而返回的json需严格按照如下格式:

{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号,默认0
  "data": [   //相册包含的图片,数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}  

(2)直接从页面中获取图片

<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>
<script>
//调用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
}); 
</script>

(3)photos还有个tab回调,切换图片时触发。

layer.photos({
  photos: json/选择器,
  tab: function(pic, layero){
    console.log(pic) //当前图片的一些信息
  }
});

© 著作权归作者所有

共有 人打赏支持
一个yuanbeth
粉丝 82
博文 106
码字总数 67430
作品 0
深圳
程序员
layer 3.0.0 发布 ,Web 弹层一次全方位的增强

在决定这个大版本更新之前,很多人建议应该把时间放在刚刚发布的 Layui 上,因为layer已经比较成熟了,没必要再更新。但是,坚持layer是一种情怀,为了对得起“国内最多人使用的弹层组件”,...

贤心
2016/11/07
6.9K
62
layer弹框在实际项目中的一些应用

官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。...

祈澈姑娘
01/18
0
0
layer 3.1.0 发布,经典的 Web 弹层解决方案

layer 是一款经典的 Web 弹层组件,拥有全方位的弹层解决方案。尽管目前是作为 layui 的独立组件来维护,但它比 layui 出现得要早得多。多年来,layer 凭借在网页弹窗方面的出色表现,被广泛...

贤心
2017/09/13
1K
18
layer 2.1 发布,web 弹层全方位解决方案

鉴于layer 2.0为其两个月的考验,也暴露了一些小问题,现已在2.1如数修复,但潜在的bug仍然在所难免,还希望您能继续反馈。(2.x对1.9+版本无缝兼容,可直接全文件覆盖升级。) Demo:http:...

贤心
2015/11/04
6.5K
22
layui怎么打开弹出层的同时,调用后台方法,让弹出层显示后台返回的页面?

怎么打开弹出层的同时,调用后台方法,让弹出层显示后台返回的页面? jfinal代码: public void form(){ String id = getPara("id"); User user = userService.findUserById(id); setAttr("us...

我是程序yuan
2017/09/07
83
2

没有更多内容

加载失败,请刷新页面

加载更多

Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
34分钟前
2
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
58分钟前
1
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
0
0
快速幂运算

题:求一个数 data 的 n 次幂,要求时间复杂度为log(n) 1:递归算法: /** * x^3=(x^2)*x;x^7=(x^3)^2 * x * * 递归算法 * @param data 底数 * @param n 次...

偶尔诗文
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部