Layui基础操作总结
/**********Layui学习总结********/
在学习中，我采⽤的是⾮模块化⽅式加载Layui(尽管官⽅不推荐这种使⽤⽅式)，在下载后导⼊到⼯程⽬录中，然后在⼯程⽂件中加⼊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./layui/css/layui.css"><!---导⼊模块-->
</head>
<body>
</body>
<script src="./layui/layui.all.js"></script><!--导⼊模块-->
</html>
其加载⽅式还有很多，官⽅也做了详细的介绍并告诉⼤家在不同的情况下推荐使⽤什么样的加载⽅式，详情请查看
1：弹出层layer
1. layer.msg()//简单弹窗，仅显⽰内容
2. layer.alert()//标准弹窗
3. firm()//带确定/取消按钮的alert弹窗
4. layer.open()//弹出窗⼝/*可带弹出窗的各种属性*/
5. layer.load()//加载效果
6. layer.tips()//⼩提⽰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./layui/css/layui.css">
<!---导⼊模块-->
</head>
<style>
#button{
width: 100px;
height: 20px;
text-align: center;
border: 1px solid gray;
}
</style>
<body>
<div id="button">按钮</div>
</body>
<script src="./../jquery-3.4.1.min.js"></script>
<script src="./layui/layui.all.js"></script>
<!--导⼊模块-->
<script>
var button = ElementById('button');
button.addEventListener("click",btnClick);
function btnClick(){
// layer.alert('alert');
// layer.msg('msg',{icon:2});//icon为图标(0-6)
// firm("000",{btnAlign:'l'});//btnAlign为按钮排列(官⽅解释)，其实在我看来更像按钮位置，有l-靠左，c-居中，r-靠右(默认)        // layer.load();
layer.open({
type:2,//类型，共计5种(0-4)类型[0-信息框，默认。1-页⾯层。2-iframe层。3-加载层。4-tips层]
title:'百度',//标题，弹框左上⾓的标题⽂字
skin: 'layui-layer-lan',//样式类名(⽪肤/颜⾊)
// area:['500px','300px'],//⼤⼩['宽','⾼']
offset:[Math.random()*500,Math.random()*300],//坐标/位置['top','left']
content:'www.baidu',//内容
id:'a',//**设置弹窗唯⼀标识，防⽌点击两次按钮后弹出多个弹窗/*可注释此⾏，多次点击按钮观察页⾯变化*/
shade:0,//去除弹窗以外区域的遮罩，默认为0.3，需⼿动去除
//shade:[0.5,'green'],//遮罩，即弹窗外其余区域的遮罩，[透明度,'颜⾊']/*如需使⽤此⾏，注释上⼀⾏*/
//shadeClose: true,//是否点击遮罩关闭弹窗(即点击弹窗外的部分关闭弹窗)，取值为布尔型，默认否(false),
time: 3000,//设置⾃动关闭时间，单位：ms,
anim:4,//弹出的过渡动画，取值-1——6，-1为不显⽰动画，默认为0
isOutAnim:false,//关闭动画，取值为布尔型，当取true时动画为逐渐缩⼩消失，取false则⽆动画
fixed:false,//浏览器⿏标滚动时，弹出窗固定在页⾯某位置(即随页⾯⼀起滚动)，默认为true(弹出窗固定在屏幕某位置)
resize:true,//弹出窗右下⾓的放⼤缩⼩该窗⼝功能，默认为ture(可放⼤缩⼩)
/*resizing:function(){
console.log('窗⼝拉伸')
},*///监听窗⼝拉伸
move:false,//是否允许窗⼝拖动以及触发拖动的元素，若允许拖动直接指向该元素即可，默认'.layui-layer-title'
moveOut:true,//是否允许拖拽到窗⼝外，默认为false(不允许)
moveEnd: function(){
console.log('拖拽完成')
},//拖拽完成的回调函数，默认不触发回调
scrollbar: true,//是否允许外部浏览器显⽰滚动条，即当显⽰弹窗后是否能滚动屏幕，默认为true(显⽰滚动条)
// maxWidth:'3',//最⼤宽度，当area：'auto'时⽣效
// maxHeight:'1',//最⼤⾼度，当⾼度⾃适应时⽣效
// zindex:'10086',//与其他组件的层级关系
success:function(){
console.log("成功弹出")
},//弹出成功的回调
btn:['按钮1','按钮2','按钮3'],//按钮
btn1:function(index,layero){
console.log("按钮1");
//btn1默认点击后弹窗不关闭
},
btn2:function(index,layero){
console.log("按钮2")
return false//加上此代码点击后弹窗不关闭，反之点击按钮弹窗关闭
},
btn3:function(index,layero){
console.log("按钮3")
layui下载},
cancel:function(){//右上⾓的关闭按钮回调函数
console.log("右上⾓关闭")
},
});
/
/ layer.tips('hello world',{tips:[4,'#c00']})//tips设置tip的⽅向，颜⾊
}
</script>
</html>
anim参数的可取值与样式
anim为弹出动画，全部采⽤css3，动画类型取值可为0-6，*取值为-1时不显⽰动画
取值动画类型
anim：0平滑放⼤，默认类型
取值动画类型
anim：1从上掉落
anim：2从底部往上滑⼊
anim：3从左滑⼊
anim：4从左翻滚
anim：5渐显
anim：6抖动
2：⽇期与时间
/****未完待续，由于最近参加了⼀个游戏创作活动，可能该⽂章更新会⽐较慢，但⼀有时间都会更新此⽂，也谢谢关注此⽂****/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。