layui前台框架的基本弹出层的使用
2017-03-09 10:50
441 查看
首先明确的是在content里面可以添加可以传入普通的html内容,也可以添加dom元素。当你在往content里面添加一个dom元素的时候,有可能碰到弹出框的按钮关闭不了,这时候你金额已根据btn数组的长度,第一个默认是yes函数,第二个默认是cancel函数,如果你写的是btn:["a","b","c"],你要给c按钮添加函数就写btn3:function(){}即可。
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
var othis = $(this);
var type = othis.data('type'),
text = othis.text();
layer.open({
title :'详情'
,type: 1
,area: [widthDom+"px",height+"px"]
,offset: type
,id: 'tongjiLay'+type //防止重复弹出
,content:$("#tongjiLay")
,btnAlign: 'c' //按钮居中
,offset: ['140px', '330px']
,btn: ['关闭','保存']
,btn2:function(){
$("#tongjiLay").css('display','none');
layer.closeAll();
}
,cancel:function(){
$("#tongjiLay").css('display','none');
layer.closeAll();
}
,offset: ['140px', '330px']
,shade: 0
,yes: function(){
$("#tongjiLay").css('display','none');
layer.closeAll();
}
});
});
其中里面关于弹出框的宽高area里面的值是可以用传参的方式赋值,而距离上左(top,left)的距离,可以 通过offset来设置的。还有值得注意的是里面的type的值不一样,弹出的形式就不一样,其属性值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。layer.open({type:
1})方式调用,其中type为必填值。
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
var othis = $(this);
var type = othis.data('type'),
text = othis.text();
layer.open({
title :'详情'
,type: 1
,area: [widthDom+"px",height+"px"]
,offset: type
,id: 'tongjiLay'+type //防止重复弹出
,content:$("#tongjiLay")
,btnAlign: 'c' //按钮居中
,offset: ['140px', '330px']
,btn: ['关闭','保存']
,btn2:function(){
$("#tongjiLay").css('display','none');
layer.closeAll();
}
,cancel:function(){
$("#tongjiLay").css('display','none');
layer.closeAll();
}
,offset: ['140px', '330px']
,shade: 0
,yes: function(){
$("#tongjiLay").css('display','none');
layer.closeAll();
}
});
});
其中里面关于弹出框的宽高area里面的值是可以用传参的方式赋值,而距离上左(top,left)的距离,可以 通过offset来设置的。还有值得注意的是里面的type的值不一样,弹出的形式就不一样,其属性值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。layer.open({type:
1})方式调用,其中type为必填值。
相关文章推荐
- 框架的基本使用
- 页面使用Ajax控件,后台不能调用前台Javascript脚本弹出消息框的解决办法
- android orm映射框架(类似hibernate)基本使用
- 使用cocos2d-x v3.1开发小游戏(基本框架)
- mini小框架BeanUtils基本使用
- 软件框架的利器、TangramMini组件应用教程三:基本使用
- scrapy框架基本使用
- Android-query框架的基本使用(二)
- Android-query框架的基本使用(一)
- jpct基本使用框架
- RCP:使用了Job框架,仍无法弹出进度框?
- Struts2 验证框架使用基本步骤
- play! 框架的搭建与基本使用方法
- OSCache缓存框架介绍 局部缓存和全局缓存的使用和基本配置项 <转>
- 使用WTL+OGRE编写3D程序(1) - 基本框架
- NHibernate的基本使用、快速入门 - Microsoft.NET开发框架应用资源(zhuan)
- 【Android】在Android上使用OrmLite数据库框架 之 基本用法
- 【Android】在Android上使用OrmLite数据库框架 之 基本用法
- Objective-C之foundation框架中的NSString的使用方法、指针基本用法、读取本地和远程文件
- OpenGL在MFC中的使用总结(一)——基本框架