我感覺是最簡單的測試了,大夥可以試試哈。
需要的插件:
skin包下爲圖片不要忘咯
測試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>