026-弹层组件

最新推荐文章于 2024-04-11 16:59:23 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-04-11 16:59:23 发布

阅读量1.2k

点赞数

分类专栏： layui学习

本文链接：https://blog.csdn.net/aihiao/article/details/113063688

版权

layui学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1. 弹层组件加载名称: layer。

2. layer至今仍作为layui的代表作, 甚至让很多人都误以为layui = layer ui, 所以再次强调layer只是作为layui的一个弹层模块, 由于其用户基数较大, 所以至今仍把她作为独立组件来维护。

3. 使用场景

3.1. 由于layer可以独立使用, 也可以通过Layui模块化使用。

场景	用前准备	调用方式
1. 作为独立组件使用	如果你只是单独想使用layer, 你可以去layer独立版本官网下载组件包。你需要在你的页面首先引入jQuery1.8以上的任意版本, 然后引入layer.js。	通过script标签引入layer.js后, 直接用即可。
2. layui模块化使用	如果你使用的是layui, 那么你直接在官网下载layui框架即可, 无需单独引入jQuery和layer.js, 但需要引入layui.css和layui.js。	通过layui.use('layer', callback)加载模块。

3.2. 作为独立组件使用layer

<!-- 一定要先引入jquery.js, 再引入layer.js -->
<script src="layer-v3.2.0/layer/jquery.js"></script>
<script src="layer-v3.2.0/layer/layer.js"></script>

<script type="text/javascript">
	layer.msg('hello');  
</script>

3.3. 在layui中使用layer

layui.use('layer', function(){
	var layer = layui.layer;
  
	layer.msg('hello');
});

4. layer.open(options) - 原始核心方法

4.1. 不管是使用哪种方式创建层, 都是走layer.open(), 创建任何类型的弹层都会返回一个当前层索引。options即是基础参数。

5. type - 基本层类型

5.1. 类型: Number。默认值: 0。

5.2. layer提供了5种层类型。可传入的值有: 0(信息框, 默认), 1(页面层), 2(iframe层), 3(加载层), 4(tips层)。若你采用layer.open({type: 1})方式调用, 则type为必填项(信息框除外)。

6. title - 标题

6.1. 类型: String/Array/Boolean。默认值: '信息'。

6.2. title支持三种类型的值, 若你传入的是普通的字符串, 如title: '我是标题', 那么只会改变标题文本; 若你还需要自定义标题区域样式, 那么你可以title: ['文本', 'font-size:18px;'], 数组第二项可以写任意css样式; 如果你不想显示标题栏, 你可以title: false。

7. content - 内容

7.1. 类型: String/DOM/Array。默认值: ''。

7.2. content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。譬如:

/!*
 如果是页面层
 */
layer.open({
	type: 1, 
	content: '传入任意的文本或html' // 这里content是一个普通的String
});
layer.open({
	type: 1,
	content: $('#id') // 这里content是一个DOM, 注意: 最好该元素要存放在body最外层, 否则可能被其它的相对元素所影响
});

/!*
 如果是iframe层
 */
layer.open({
	type: 2, 
	content: 'http://sentsin.com' // 这里content是一个URL, 如果你不想让iframe出现滚动条, 你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
	type: 4,
	content: ['内容', '#id'] // 数组第二项即吸附元素选择器或者DOM
});

// Ajax获取
$.post('url', {}, function(obj){
	layer.open({
    	type: 1,
    	content: obj.id + obj. name // 这里解析obj的属性
	});
});

8. skin - 样式类名

8.1. 类型: String。默认值: ''。

8.2. skin不仅允许你传入layer内置的样式class名, 还可以传入您自定义的class名。这是一个很好的切入点, 意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有: layui-layer-lan、layui-layer-molv, 未来我们还会选择性地内置更多, 但更推荐您自己来定义。以下是一个自定义风格的简单例子:

body .layui-layer-c00 .layui-layer-title { background: #c00; color: #fff; border: none; }
body .layui-layer-c00 .layui-layer-content { background: #5FB878; }
body .layui-layer-c00 .layui-layer-btn { border-top: 1px solid #E9E7E7 }
body .layui-layer-c00 .layui-layer-btn .layui-layer-btn0 { background: #01AAED; }
body .layui-layer-c00 .layui-layer-btn .layui-layer-btn1 { background: #FFB800; }

8.3. skin对加载层和tips层没有作用。

9. area - 宽高

9.1. 类型: String/Array。默认值: 'auto'。

9.2. 在默认状态下, layer是宽高都自适应的, 但当你只想定义宽度时, 你可以area: '500px', 高度仍然是自适应的。当你宽高都要定义时, 你可以area: ['500px', '300px']。

10. offset - 坐标

10.1. 类型: String/Array。默认值: 垂直水平居中。

10.2. offset默认情况下不用设置。但如果你不想垂直水平居中, 你还可以进行以下赋值:

11. icon - 图标

11.1. 图标是信息框和加载层的私有参数。

11.2. 类型: Number。默认值: -1(信息框), 0(加载层)。

11.3. 信息框默认不显示图标, 当你想显示图标时, 默认皮肤可以传入0-6。如果是加载层, 可以传入0-2。

12. btn - 按钮

12.1. 类型: String/Array。默认值: '确认'。

12.2. 信息框模式时, btn默认是一个确认按钮, 其它层类型则默认不显示, 加载层和tips层则无效。当您只想自定义一个按钮时, 你可以btn: '我知道了', 当你要定义两个按钮时, 你可以btn: ['yes', 'no']。当然, 你也可以定义更多按钮, 比如: btn: ['按钮1', '按钮2', '按钮3', …], 按钮1的回调是yes, 而从按钮2开始, 则回调为btn2: function(){}, 以此类推。如:

layer.open({
  btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    // 按钮[按钮一]的回调
  }
  ,btn2: function(index, layero){
    // 按钮[按钮二]的回调
    
    // return false; 开启该代码可禁止点击该按钮关闭层
  }
  ,btn3: function(index, layero){
    // 按钮[按钮三]的回调
    
    // return false; 开启该代码可禁止点击该按钮关闭层
  }
  ,cancel: function(){ 
    // 右上角关闭按钮回调
    
    // return false; 开启该代码可禁止点击该按钮关闭层
  }
});

13. btnAlign - 按钮排列

13.1. 类型: String。默认值: r。

13.2. 你可以快捷定义按钮的排列位置, btnAlign的默认值为r, 即右对齐。该参数可支持的赋值如下:

14. closeBtn - 关闭按钮

14.1. 类型: String/Boolean。默认值: 1。

14.2. layer提供了两种风格的关闭按钮, 可通过配置1和2来展示, 如果不显示, 则closeBtn: 0。

15. shade - 遮罩

15.1. 类型: String/Array/Boolean。默认值: 0.3。

15.2. 即弹层外区域。默认是0.3透明度的黑色背景('#000')。如果你想定义别的颜色, 可以shade: [0.8, '#393D49']; 如果你不想显示遮罩, 可以shade: 0。

16. shadeClose - 是否点击遮罩关闭

16.1. 类型: Boolean。默认值: false。

16.2. 如果你的shade是存在的, 那么你可以设定shadeClose来控制点击弹层外区域关闭。

17. time - 自动关闭所需毫秒

17.1. 类型: Number。默认值: 0。

17.2. 默认不会自动关闭。当你想自动关闭时, 可以time: 5000, 即代表5秒后自动关闭, 注意单位是毫秒(1秒=1000毫秒)。

18. id - 用于控制弹层唯一标识

18.1. 类型: String。默认值: 空字符。

18.2. 设置该值后, 不管是什么类型的层, 都只允许同时弹出一个。一般用于页面层和iframe层模式。

19. anim - 弹出动画

19.1. 类型: Number。默认值: 0。

19.2. 我们的出场动画全部采用CSS3。目前anim可支持的动画类型有0-6如果不想显示动画, 设置anim: -1 即可。

20. isOutAnim - 关闭动画

20.1. 类型: Boolean。默认值: true。

20.2. 默认情况下, 关闭层时会有一个过度动画。如果你不想开启, 设置isOutAnim: false即可。

21. maxmin - 最大最小化

21.1. 类型: Boolean。默认值: false。

21.2. 该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可。

22. fixed - 固定

22.1. 类型: Boolean。默认值: true。

22.2. 即鼠标滚动时, 层是否固定在可视区域。如果不想, 设置fixed: false即可。

23. resize - 是否允许拉伸

23.1. 类型: Boolean。默认值: true。

23.2. 默认情况下, 你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能, 设置false即可。该参数对loading、tips层无效。

24. resizing - 监听窗口拉伸动作

24.1. 类型: Function。默认值: null。

24.2. 当你拖拽弹层右下角对窗体进行尺寸调整时, 如果你设定了该回调, 则会执行。回调返回一个参数: 当前层的DOM对象。

resizing: function(layero){
  	console.log(layero);
}

25. zIndex - 层叠顺序

25.1. 类型: Number。默认值: 19891014。

25.2. 一般用于解决和其它组件的层叠冲突。

26. move - 触发拖动的元素

26.1. 类型: String/DOM/Boolean。默认值: '.layui-layer-title'。

26.2. 默认是触发标题区域拖拽。如果你想单独定义, 指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽。

27. moveOut - 是否允许拖拽到窗口外

27.1. 类型: Boolean。默认值: false。

27.2. 默认只能在窗口内拖拽, 如果你想让拖到窗外, 那么设定moveOut: true即可。

28. moveEnd - 拖动完毕后的回调方法

28.1. 类型: Function。默认值: null。

28.2. 默认不会触发moveEnd, 如果你需要, 设定moveEnd: function(layero){}即可。其中layero为当前层的DOM对象。

moveEnd: function(layero){
  	console.log(layero);
}

29. tips - tips方向和颜色

29.1. 类型: Number/Array。默认值: 2。

29.2. tips层的私有参数。支持上右下左四个方向, 通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色, 可以设定tips: [1, '#c00']。

30. tipsMore - 是否允许多个tips

30.1. 类型: Boolean。默认值: false。

30.2. 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启。

31. success - 层弹出后的成功回调方法

31.1. 类型: Function。默认值: null。

31.2. 当你需要在层创建完毕时即执行一些语句, 可以通过该回调。success会携带两个参数, 分别是当前层DOM当前层索引。如:

success: function(layero, index){
	console.log(layero, index);
}

32. yes - 确定按钮回调方法

32.1. 类型: Function。默认值: null。

32.2. 该回调携带两个参数, 分别为当前层索引、当前层DOM对象。如:

yes: function(index, layero){
	console.log(layero, index);
}

33. cancel - 右上角关闭按钮触发的回调

33.1. 类型: Function。默认值: null。

33.2. 该回调携带两个参数, 分别为: 当前层索引参数(index)、当前层的DOM对象(layero), 默认会自动触发关闭。如果不想关闭, return false即可, 如:

cancel: function(index, layero){ 
	console.log(layero, index); 
}

34. end - 层销毁后触发的回调

34.1. 类型: Function。默认值: null。

34.2. 无论是确认还是取消, 只要层被销毁了, end都会执行, 不携带任何参数。

end: function(){ 
	console.log('---end---');
}

35. full/min/restore -分别代表最大化、最小化、还原后触发的回调

35.1. 类型: Function。默认值: null。

35.2. 携带一个参数, 即当前层DOM。

full: function(layero){
  	console.log(layero);
}
min: function(layero){
  	console.log(layero);
}
restore: function(layero){
  	console.log(layero);
}

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

36.1. 这是一个可以重要也可以不重要的方法, 重要的是, 它的权利真的很大, 尤其是在模块化加载layer时, 你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块, 甚至还可以决定整个弹层的默认参数。而说它不重要, 是因为多数情况下, 你会发现, 你似乎不是那么十分需要它。

36.2. layer.config可以配置层默认的基础参数, 如:

layer.config({
	anim: 1, // 默认动画风格
	skin: 'layui-layer-molv' // 默认皮肤
	…
});
// 除此之外, extend还允许你加载拓展的css皮肤, 如:
layer.config({
	// 如果是独立版的layer, 则将myskin存放在./skin目录下
	// 如果是layui中使用layer, 则将myskin存放在./css/modules/layer目录下
	extend: 'myskin/style.css'
});

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

37.1. 由于我们的layer内置了轻量级加载器, 所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时, 你最好是将弹层放入ready方法中, 如:

// 页面一打开就执行弹层
layer.ready(function(){
	layer.msg('很高兴一开场就见到你');
});

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

38.1. 它的弹出似乎显得有些高调, 一般用于对用户造成比较强烈的关注, 类似系统alert, 但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数, 可以设定各种你所需要的基础参数, 但如果你不需要的话, 直接写回调即可。如:

// eg1
layer.alert('只想简单的提示');

// eg2
layer.alert('加了个图标', {icon: 1}); // 这时如果你也还想执行yes回调, 可以放在第三个参数中。

// eg3
layer.alert('有了回调', function(index){
	// do something
  
	layer.close(index);
});

39. layer.confirm(content, options, yes, cancel) - 确认框

39.1. 类似系统confirm, 但却远胜confirm, 另外它不是和系统的confirm一样阻塞, 你需要把交互的语句放在回调体中。同样的, 它的参数也是自动补齐的。

// eg1
layer.confirm('不开心。');

// eg2
layer.confirm('不开心。', {icon: 3});

// eg3
layer.confirm('不开心。', function(index){
	layer.close(index);
}, function(index){
	layer.close(index);
});

// eg4
layer.confirm('不开心。', {icon: 3}, function(index){
	layer.close(index);
}, function(index){
	layer.close(index);
});

40. layer.msg(content, options, end) - 提示框

40.1. 它简单, 而且足够得自觉, 它不仅占据很少的面积, 而且默认还会3秒后自动消失。在作用方面, 它坚持零用户操作。而且它的参数也是自动补齐的。

// eg1
layer.msg('只想弱弱提示');

// eg2
layer.msg('有表情地提示', {icon: 6}); 

// eg3
layer.msg('关闭后想做些什么', function(){
	// do something
});

// eg4
layer.msg('同上', {
	icon: 1,
	time: 2000 // 2秒关闭(如果不配置, 默认是3秒)
}, function(){
	// do something
});

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

41.1. type:3的深度定制。load并不需要你传太多的参数, 但如果你不喜欢默认的加载风格, 你还有选择空间。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);

42. layer.tips(content, follow, options) - tips层

42.1. type:4的深度定制。它拥有和msg一样的低调和自觉, 而且会智能定位, 即灵活地判断它应该出现在哪边。默认是在元素右边弹出。

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

43.1. 关于它似乎没有太多介绍的必要, 唯一让你疑惑的, 可能就是这个index了吧。事实上它非常容易得到。

// 调用如下方法的时候都会返回一个index值
var index = layer.open();
var index = layer.alert();
var index = layer.msg();
var index = layer.confirm();
var index = layer.tips();
var index = layer.load();
var index = layer.prompt();
var index = layer.tab();

// 你只需要给layer.close(index)方法传入它们对应的index, 就可以关闭特定层
layer.close(index);

 
// 如果你想关闭最新弹出的层, 直接获取layer.index即可
layer.close(layer.index);

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

44.1. 如果你很懒, 你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话, 它会销毁掉当前页所有的layer层。当然, 如果你只想关闭某个类型的层, 那么你可以:

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

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

45.1. 该方法对loading层和tips层无效。参数index为层的索引, cssStyle允许你传入任意的css属性:

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

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

46.1. 使用方式: layer.title('标题变了', index)。

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

47.1. 当你试图在当前页获取iframe页的DOM元素时, 你可以用此方法。selector即iframe页的选择器。

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

48.1. 调用该方法时, iframe层的高度会重新进行适应。

49. layer.iframeSrc(index, url) - 重置特定iframe url

49.1. 使用方式: layer.iframeSrc(index, 'http://sentsin.com')。

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

50.1. 非常强大的一个方法, 虽然一般很少用。但是当你的页面有很多很多layer窗口, 你需要像Window窗体那样, 点击某个窗口, 该窗体就置顶在上面, 那么setTop可以来轻松实现。它采用巧妙的逻辑, 以使这种置顶的性能达到最优。

// 通过这种方式弹出的层, 每当它被选择, 就会置顶。
layer.open({
	type: 2,
	shade: false,
	area: '500px',
	maxmin: true,
	content: 'http://www.layui.com',
	zIndex: layer.zIndex, // 重点1
	success: function(layero){
    	layer.setTop(layero); // 重点2
	}
});

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

51.1. 一般用于在自定义元素上触发最大化、最小化和全屏。

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

52.1. prompt的参数也是向前补齐的。options不仅可支持传入基础参数, 还可以传入prompt专用的属性, 当然, 也可以不传。yes携带value 表单值、index 索引、elem 表单元素:

// eg1
layer.prompt({
	formType: 1,
	value: '',
	maxlength: 140
});

// eg2
layer.prompt(function(value, index, elem){
  	alert(value); 
  	layer.close(index);
});

// eg3
layer.prompt({
	formType: 2,
	value: '',
	maxlength: 140
},function(value, index, elem){
  	alert(value); 
  	layer.close(index);
});

53. layer.tab(options) - tab层

53.1. tab层只单独定制了一个成员, 即tab: [], 简单粗暴看例子:

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

54. layer.photos(options) - 相册层

54.1. 相册层, 也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。

54.2. 如果是json传入, 如下:

<script type="text/javascript">
	layui.use(['util', 'layer'], function() {
		var layer = layui.layer
			,util = layui.util;

		var json = {
			"title": "vivo NEX 3", // 相册标题
			"id": 123, // 相册id
			"start": 0, // 初始显示的图片序号, 默认0
			"data": [   // 相册包含的图片, 数组格式
		    	{
		    		"alt": "vivo NEX 3 正反面图",
		    		"pid": 100101, // 图片id
		    		"src": "vivo_big_01.png", // 原图地址
		    		"thumb": "vivo_01.png" // 缩略图地址
		    	},
		    	{
		    		"alt": "vivo NEX 3 正面图",
		    		"pid": 100102, // 图片id
		    		"src": "vivo_big_02.png", // 原图地址
		    		"thumb": "vivo_02.png" // 缩略图地址
		    	},
		    	{
		    		"alt": "vivo NEX 3 反面图",
		    		"pid": 100103, // 图片id
		    		"src": "vivo_big_03.png", // 原图地址
		    		"thumb": "vivo_03.png" // 缩略图地址
		    	},
		    	{
		    		"alt": "vivo NEX 3 多色系图",
		    		"pid": 100104, // 图片id
		    		"src": "vivo_big_04.png", // 原图地址
		    		"thumb": "vivo_04.png" // 缩略图地址
		    	}
		  	]
		};

		layer.photos({
		    photos: json
		    ,anim: 1 // 0-6的选择, 指定弹出图片动画类型, 默认随机
		});
	});              
</script>

54.3. 如果是直接从页面中获取图片, 那么需要指向图片的父容器, 并且你的img可以设定一些规定的属性(但不是必须的):

<div id="layer-photos-demo" class="layer-photos-demo">
	<img layer-pid="100101" layer-src="vivo_big_01.png" src="vivo_01.png" alt="vivo NEX 3 正反面图">
	<img layer-pid="100102" layer-src="vivo_big_02.png" src="vivo_02.png" alt="vivo NEX 3 正面图">
	<img layer-pid="100103" layer-src="vivo_big_03.png" src="vivo_03.png" alt="vivo NEX 3 反面图">
	<img layer-pid="100104" layer-src="vivo_big_04.png" src="vivo_04.png" alt="vivo NEX 3 多色系图">
</div>

<script type="text/javascript">
	layui.use(['util', 'layer'], function() {
		var layer = layui.layer
			,util = layui.util;

		layer.photos({
		  	photos: '#layer-photos-demo'
		  	,anim: 5 // 0-6的选择, 指定弹出图片动画类型, 默认随机
		  	,tab: function(pic, layero){
		  		console.log('pic = ' + pic + ', layero = ' + layero);
		  	}
		}); 
	});              
</script>

54.4. 另外, photos还有个tab回调, 切换图片时触发。

55. layer.open()方法例子

55.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>layer.open(options)方法</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>

		<style type="text/css">
			body .layui-layer-c00 .layui-layer-title { background: #c00; color: #fff; border: none; }
			body .layui-layer-c00 .layui-layer-content { background: #5FB878; }
			body .layui-layer-c00 .layui-layer-btn { border-top: 1px solid #E9E7E7 }
			body .layui-layer-c00 .layui-layer-btn .layui-layer-btn0 { background: #01AAED; }
			body .layui-layer-c00 .layui-layer-btn .layui-layer-btn1 { background: #FFB800; }
		</style>
	</head>
	<body>
		<br /><br />
		<button id="id0" class="layui-btn" lay-active="type0">(信息框, 默认)layer.open({type: 0})</button> 
		<button id="id1" class="layui-btn" lay-active="type1">(页面层)layer.open({type: 1})</button> 
		<button id="id2" class="layui-btn" lay-active="type2">(iframe层)layer.open({type: 2})</button> 
		<button id="id3" class="layui-btn" lay-active="type3">(加载层)layer.open({type: 3})</button> 
		<button id="id4" class="layui-btn" lay-active="type4">(tips层)layer.open({type: 4})</button> <br /> <br />

		<button id="id5" class="layui-btn" lay-active="type0_1">多按钮信息框</button>
		<button id="id6" class="layui-btn" lay-active="type0_2">拖动内容区域可移动</button>
		<button id="id7" class="layui-btn" lay-active="type4_1">上面显示tips层</button>
		<button id="id8" class="layui-btn" lay-active="type4_2">下面显示tips层</button>
		<button id="id9" class="layui-btn" lay-active="type4_3">左面显示tips层</button>

		<script type="text/javascript">
			layui.use(['util', 'layer'], function() {
  				var layer = layui.layer
  				,util = layui.util;
  				var id1BtnDoc = document.getElementById('id1');
  				var top = id1BtnDoc.offsetHeight + id1BtnDoc.offsetTop + 3;
  				var left = id1BtnDoc.offsetLeft;

				util.event('lay-active', {
				    type0: function() {
				    	layer.open({
					  		type: 0 
					  		,title: '我是默认的信息框'
					  		,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
					  		,icon: 0
					  		,closeBtn: false
					  		,shadeClose: true
					  		,resize: false 
						});
				    },

				    type1: function() {
				    	layer.open({
					  		type: 1 
					  		,title: '我是页面层'
					  		,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
					  		,skin: 'layui-layer-lan'
					  		,area: ['500px', '300px']
					  		,offset: [top, left]
					  		,closeBtn: 2
					  		,shade: 0
					  		,id: 'pagelayer'
					  		,anim: 1
					  		,isOutAnim: false
					  		,resize: false
						});
				    },

				    type2: function() {
				    	layer.open({
					  		type: 2 
					  		,title: '我是iframe层'
					  		,content: 'http://www.baidu.com'
					  		,skin: 'layui-layer-molv'
					  		,shade: 0.7
					  		,shadeClose: true
					  		,id: 'iframe'
					  		,anim: 2
					  		,maxmin: true
					  		,resizing: function(layero){
							  	console.log(layero);
							}
							,full: function(layero){
							  	console.log(layero);
							}
							,min: function(layero){
							  	console.log(layero);
							}
							,restore: function(layero){
							  	console.log(layero);
							}   
						});
				    },

				    type3: function() {
				    	layer.open({
					  		type: 3 
					  		,title: '我是加载层'
					  		,content: '正在努力加载, 请耐心等待...'
					  		,icon: 0
					  		,shade: 0.1
					  		,time: 3000
					  		,anim: 3
						});
				    },

				    type4: function() {
				    	layer.open({
					  		type: 4 
					  		,title: '我是tips层'
					  		,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id4"]
					  		,shade: false
					  		,time: 3000
					  		,anim: 4
					  		,tipsMore: true
						});
				    },

				    type0_1: function() {
				    	layer.open({
					  		type: 0 
					  		,title: '我是默认的信息框'
					  		,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
					  		,skin: 'layui-layer-c00'
					  		,area: ['800px', '500px']
					  		,offset: 'rb'
					  		,icon: 1
					  		,btn: ['yes', 'no']
					  		,btnAlign: 'c'
					  		,closeBtn: 1
					  		,shade: 0.9
					  		,shadeClose: true
					  		,anim: 5
					  		,resize: false
					  		,success: function(layero, index){
								console.log(layero, index);
							}
							,yes: function(index, layero){
								console.log(layero, index);
							}
							,btn2: function(index, layero){
								console.log(layero, index);
							}
							,cancel: function(index, layero){ 
								console.log(layero, index); 
							}    
							,end: function(){ 
								console.log('---end---');
							}
						});
				    },

				    type0_2: function() {
				    	layer.open({
					  		type: 0 
					  		,title: '我是默认的信息框'
					  		,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
					  		,icon: 2
					  		,anim: 6
					  		,move: '.layui-layer-content' 
					  		,moveOut: true
					  		,moveEnd: function(layero){
							  	console.log(layero);
							}
						});
				    },

				    type4_1: function() {
				    	layer.open({
					  		type: 4 
					  		,title: '我是tips层'
					  		,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id7"]
					  		,shade: false
					  		,time: 8000
					  		,tips: 1
					  		,tipsMore: true
						});
				    },

				    type4_2: function() {
				    	layer.open({
					  		type: 4 
					  		,title: '我是tips层'
					  		,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id8"]
					  		,shade: false
					  		,time: 8000
					  		,tips: 3
					  		,tipsMore: true
						});
				    },

				    type4_3: function() {
				    	layer.open({
					  		type: 4 
					  		,title: '我是tips层'
					  		,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id9"]
					  		,shade: false
					  		,time: 8000
					  		,tips: 4
					  		,tipsMore: true
						});
				    }
				});
			});              
		</script>
	</body>
</html>

56. layer单独使用例子

56.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>layer单独使用</title>
		<!-- 一定要先引入jquery.js, 再引入layer.js -->
		<script src="layer-v3.2.0/layer/jquery.js"></script>
		<script src="layer-v3.2.0/layer/layer.js"></script>
		
	</head>
	<body>
		<div style="width: 500px; height: 2000px; background: #c2c2c2;">
  			
		</div>

		<script type="text/javascript">
			;!function(){
				layer.ready(function(){
					layer.open({
				  		type: 0 
				  		,title: '我是默认的信息框'
				  		,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
				  		,offset: 'lt'
				  		,fixed: false
					}); 
				});
			}();  
		</script>
	</body>
</html>

57. 例子

57.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>弹层 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<button id="id0" class="layui-btn" lay-active="type0">(信息框, 默认)layer.open({type: 0})</button> 
		<button id="id1" class="layui-btn" lay-active="type1">(页面层)layer.open({type: 1})</button> 
		<button id="id2" class="layui-btn" lay-active="type2">(iframe层)layer.open({type: 2})</button> 
		<button id="id3" class="layui-btn" lay-active="type3">(加载层)layer.open({type: 3})</button> 
		<button id="id4" class="layui-btn" lay-active="type4">(tips层)layer.open({type: 4})</button> <br /> <br />

		<button id="close-1" class="layui-btn" lay-active="closeAll">关闭所有层</button>
		<button id="close-2" class="layui-btn" lay-active="closeLatest">关闭最新弹</button>
		<button id="close-3" class="layui-btn" lay-active="closeDialog">关闭所有的信息框</button>
		<button id="close-4" class="layui-btn" lay-active="closePage">关闭所有的页面层</button>
		<button id="close-5" class="layui-btn" lay-active="closeIframe">关闭所有的iframe层</button>
		<button id="close-6" class="layui-btn" lay-active="closeLoading">关闭所有的加载层</button>
		<button id="close-7" class="layui-btn" lay-active="closeTips">关闭所有的tips层</button>
		<br /> <br />

		<button id="id5" class="layui-btn" lay-active="alert">layer.alert()</button>
		<button id="id6" class="layui-btn" lay-active="msg">layer.msg()</button>
		<button id="id7" class="layui-btn" lay-active="confirm">layer.confirm()</button>
		<button id="id8" class="layui-btn" lay-active="tips">layer.tips()</button>
		<button id="id9" class="layui-btn" lay-active="load">layer.load()</button>
		<button id="id10" class="layui-btn" lay-active="prompt1">layer.prompt() 1</button>
		<button id="id11" class="layui-btn" lay-active="prompt2">layer.prompt() 2</button>
		<button id="id12" class="layui-btn" lay-active="prompt3">layer.prompt() 3</button>
		<button id="id13" class="layui-btn" lay-active="tab">layer.tab()</button> <br /> <br />

		<div id="layer-photos-demo" class="layer-photos-demo">
  			<img layer-pid="100101" layer-src="vivo_big_01.png" src="vivo_01.png" alt="vivo NEX 3 正反面图">
  			<img layer-pid="100102" layer-src="vivo_big_02.png" src="vivo_02.png" alt="vivo NEX 3 正面图">
  			<img layer-pid="100103" layer-src="vivo_big_03.png" src="vivo_03.png" alt="vivo NEX 3 反面图">
  			<img layer-pid="100104" layer-src="vivo_big_04.png" src="vivo_04.png" alt="vivo NEX 3 多色系图">
		</div>

		<script type="text/javascript">
			layui.use(['util', 'layer'], function() {
  				var layer = layui.layer
  					,util = layui.util;

  				layer.photos({
				  	photos: '#layer-photos-demo'
				  	,anim: 5 // 0-6的选择, 指定弹出图片动画类型, 默认随机
				  	,tab: function(pic, layero){
				  		console.log('pic = ' + pic + ', layero = ' + layero);
				  	}
				}); 

				util.event('lay-active', {
					closeAll: function() {
				    	layer.closeAll(); // 疯狂模式, 关闭所有层
				    },

				    closeLatest: function() {
				    	layer.close(layer.index); // 关闭最新弹出的层
				    },

				    closeDialog: function() {
				    	layer.closeAll('dialog'); // 关闭所有的信息框
				    },

				    closePage: function() {
						layer.closeAll('page'); // 关闭所有的页面层
				    },

				    closeIframe: function() {
						layer.closeAll('iframe'); // 关闭所有的iframe层
				    },

				    closeLoading: function() {
						layer.closeAll('loading'); // 关闭所有的加载层
				    },

				    closeTips: function() {
						layer.closeAll('tips'); // 关闭所有的tips层 
				    },

				     type0: function() {
				    	var idx = layer.open({
					  		type: 0 
					  		,title: '我是默认的信息框'
					  		,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
					  		,shade: 0
						});

						console.log('type0 idx = ' + idx);
				    },

				    type1: function() {
				    	var idx = layer.open({
					  		type: 1 
					  		,title: '我是页面层'
					  		,content: 'content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。'
					  		,shade: 0
					  		,area: ['500px', '300px']
						});

						console.log('type1 idx = ' + idx);
				    },

				    type2: function() {
				    	var idx = layer.open({
					  		type: 2 
					  		,title: '我是iframe层'
					  		,content: 'http://www.baidu.com'
					  		,shade: 0
						});

						console.log('type2 idx = ' + idx);
				    },

				    type3: function() {
				    	var idx = layer.open({
					  		type: 3 
					  		,title: '我是加载层'
					  		,content: '正在努力加载, 请耐心等待...'
					  		,icon: 0
					  		,shade: false
						});

						console.log('type3 idx = ' + idx);
				    },

				    type4: function() {
				    	var idx = layer.open({
					  		type: 4 
					  		,title: '我是tips层'
					  		,content: ['content可传入的值是灵活多变的, 不仅可以传入普通的html内容, 还可以指定DOM, 更可以随着type的不同而不同。', "#id4"]
					  		,shade: false
						});

						console.log('type4 idx = ' + idx);
				    },

				    alert: function() {
				    	var idx = layer.alert('酷毙了', {icon: 1, shade: 0}, function(index){
							console.log('---alert yes方法---');
						});
						console.log('alert idx = ' + idx);
				    },

				    msg: function() {
				    	var idx = layer.msg('不开心。', {time: 0, icon: 2, shade: 0}, function(index){
							console.log('---msg end方法---');
						});
						console.log('msg idx = ' + idx);
				    },

				    confirm: function() {
				    	var idx = layer.confirm('不开心。', {icon: 3, shade: 0}, function(index){
							console.log('---confirm yes方法---');
						}, function(index){
							console.log('---confirm cancel方法---');
						});
						console.log('confirm idx = ' + idx);
				    },

				    tips: function() {
				    	var idx = layer.tips('我是tips层', '#id8', {time: 0, shade: 0, tips: 3});
				    	console.log('tips idx = ' + idx);
				    },

				    load: function() {
				    	var idx = layer.load(1, {content: '我是加载层', shade: 0});
				    	console.log('load idx = ' + idx);
				    },

				    prompt1: function() {
				    	var idx = layer.prompt({
					  		formType: 1 // 输入框类型, 支持0是文本(默认值), 1是密码, 2是多行文本
					  		,value: '' // 初始时的值, 默认空字符
					  		,maxlength: 140 // 可输入文本的最大长度, 默认500
					  		,shade: 0
						});

						console.log('prompt1 idx = ' + idx);
				    },

				    prompt2: function() {
				    	layer.prompt(function(value, index, elem){
						  	alert(value); //得到value
						  	layer.close(index);
						});
				    },

				     prompt3: function() {
				    	layer.prompt({
					  		formType: 2, // 输入框类型, 支持0是文本(默认值), 1是密码, 2是多行文本
					  		value: '', // 初始时的值, 默认空字符
					  		maxlength: 140 // 可输入文本的最大长度, 默认500
						},function(value, index, elem){
						  	alert(value); // 得到value
						  	layer.close(index);
						});
				    },

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

						console.log('tab idx = ' + idx);
				    }
				});
			});              
		</script>
	</body>
</html>

自由与束缚JavaJavaScript

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
026-弹层组件

1. 弹层组件加载名称: layer。2. layer至今仍作为layui的代表作, 甚至让很多人都误以为layui = layer ui, 所以再次强调layer只是作为layui的一个弹层模块, 由于其用户基数较大, 所以至今仍把她作为独立组件来维护。3. 使用场景3.1. 由于layer可以独立使用, 也可以通过Layui模块化使用。场景用前准备调用方式 1. 作为独立组件使用如果你只是
复制链接

扫一扫