Layer插件的常用提示框,如何使用Layer

我感觉是最简单的测试了,大伙可以试试哈。
需要的插件:
skin包下为图片不要忘咯
必要jar包

测试7的效果如下:
测试7效果

open的方式就大概说一下测试代码没有写
测试的时候可以试一下遮罩层效果很好,content可以放路径和指定要打开的标签对象。

layer.open({//捕获页
					  type: 1,
					  btn: ['确定', '取消'],
					  //shade: false, //默认开启遮罩层
					  title: "折旧设置",  
					  area: ['755px', '650px'], //宽高
					  content: $('#depreciationForm'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
					  cancel: function(){
					    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
					  }
					})

复制下面代码将插件路径修改就可以测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script>
	<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../js/layer.js" ></script>
	<body>
		<button onclick="t1()">点击测试1</button>
		<button onclick="t2()">点击测试2</button>
		<button onclick="t3()">点击测试3</button>
		<button onclick="t4()">点击测试4</button>
		<button onclick="t5()">点击测试5</button>
		<button onclick="t6()">点击测试6</button>
		<button onclick="t7()">点击测试7</button>
		<input type="button" id="test" onclick="test()" value="校验"/>
	</body>
	<script>
		function test(){
			layer.tips("测试校验!","#test",{//第一个参数为提示字体;二为在哪个的后面
					tips:[2,"red"],//第一个参数:1.上 2.右 3.下 4.左 提示方向,第二个为:颜色
					tipsMore:true,//true为不允许多个,false为允许多个
					time:5000});//不设置时间默认两秒,这里是5秒关闭,设为0则不关闭
		}
		function t1(){
			//layer.msg("测试成功!",{time:1000});
			layer.msg('<div style="color:gray;">正在导出</div>', {icon: 16});
		}
		function t2(){
			layer.msg("测试成功!",{
				time:2000,
				icon:6,
				btn:['稍后重启','现在重启','不再提示']
			});
		}
		function t3(){
			layer.prompt(
		  		{
				    formType: 2,
				    value: '初始值',
				    title: '标题'
				}, function(value, index, elem){
				    alert(value); //得到value
				    layer.close(index);
			  	}
			);
		}
		function t4(){
			/*var la = layer.load("导出中...");*/
			var la = layer.load(1,{shade:[0.1,'#fff'],time:1000});//设置背景透明,false可以点击其他,true不可点击其他为背景黑色
			/*var la = layer.load(2, {content:'<div style="color:gray;">导出...</div>',time: 1500,success: function(layero){
				layero.find('.layui-layer-content').css({'padding-top':'35px','width':'50px'});
			}})*/
			
		}
		function t5(){
			layer.alert("测试成功!");
		}
		function t6(){
			layer.alert("测试成功!",{
				time:2000,
				icon:6,
				btn:['稍后重启','现在重启','不再提示']
			});
		}
		function t7(){
			layer.alert("测试成功!",{
				skin: 'layui-layer-molv', //样式类名  自定义样式
				/*自带三种皮肤
				 *  layui-layer-molv
					layui-layer-lan
					layui-layer-rim
				 */
				closeBtn: 1,   // 是否显示关闭按钮
				anim: 1,//动画类型
				btn: ['确定','取消'], //按钮
				icon: 6,   // icon
				yes:function(){
					layer.msg('确定成功!');
				},
				btn2:function(){
					layer.msg('取消成功!');
				}
			});
		}
	</script>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43992507/article/details/84951308
今日推荐