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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章