Layui基础操作总结

/**********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>

其加载方式还有很多，官方也做了详细的介绍并告诉大家在不同的情况下推荐使用什么样的加载方式，详情请查看Layui官网

1：弹出层layer

layer.msg()//简单弹窗，仅显示内容
layer.alert()//标准弹窗
layer.confirm()//带确定/取消按钮的alert弹窗
layer.open()//弹出窗口/*可带弹出窗的各种属性*/
layer.load()//加载效果
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 = document.getElementById('button');
    button.addEventListener("click",btnClick);
    function btnClick(){

        // layer.alert('alert');
        // layer.msg('msg',{icon:2});//icon为图标(0-6)
        // layer.confirm("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:'http://www.baidu.com',//内容
            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")
            },
            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：日期与时间

/****未完待续，由于最近参加了一个游戏创作活动，可能该文章更新会比较慢，但一有时间都会更新此文，也谢谢关注此文****/

Layui基础操作总结

1：弹出层layer

anim参数的可取值与样式

2：日期与时间

猜你喜欢