layer弹层组件移动版介绍以及使用方法示例代码_layer mobile

作者：小小林熬夜学编程 | 2024-02-16 12:36:31

踩

layer mobile

1、layer mobile 是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。

和layer PC版不同的是，只提供一个核心调用方法，即：layer.open(options)

layer移动版弹层地址： layer 移动端弹层界面组件

layer移动版弹层 API地址： layer弹层组件移动版

PC版的layer弹层 API地址： layer 弹层组件开发文档 - Layui

layer 弹出层组件 - jQuery 弹出层插件

前端UI框架layui官网： Layui - 经典开源模块化前端 UI 组件库

layer弹层组件PC版介绍以及使用方法示例代码： layer弹层组件PC版介绍以及使用方法示例代码_程序媛zcc的博客-CSDN博客

2、layer弹出层移动版轻量级，在官网下载layer移动版包后，引入layer.css 和 layer.js就可以使用，非常好用，pc端也能使用。示例代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>layer弹层组件移动版</title>
    <link rel="stylesheet" href="layer/mobile/need/layer.css">
    <style>
        button {
            height: 35px;
            line-height: 35px;
            border-radius: 2px;
            background-color: #1AA094;
            color: #fff;
            border: none;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<button id="btn1">信息框</button>
<button id="btn2">提示</button>
<button id="btn3">询问框</button>
<button id="btn4">底部对话框</button>
<button id="btn5">底部提示</button>
<button id="btn6">自定义标题风格</button>
<button id="btn7">页面层</button>
<button id="btn8">loading层</button>
<button id="btn9">loading带文字</button>
</body>
</html>
<script src="../jquery.min.js"></script>
<script src="layer/mobile/layer.js"></script>
<script>
    $("#btn1").on("click", function () {
        //信息框
        layer.open({
            content: '移动版和PC版不能同时存在同一页面'
            , btn: '我知道了'
        });
    });
 
    $("#btn2").on("click", function () {
        //提示
        layer.open({
            content: 'hello layer'
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
        });
    });
 
    $("#btn3").on("click", function () {
        //询问框
        layer.open({
            content: '您确定要刷新一下本页面吗？'
            , btn: ['刷新', '不要']
            , yes: function (index) {
                location.reload();
                layer.close(index);
            }
        });
    });
 
    $("#btn4").on("click", function () {
        //底部对话框
        layer.open({
            content: '这是一个底部弹出的询问提示'
            , btn: ['删除', '取消']
            , skin: 'footer'
            , yes: function (index) {
                layer.open({content: '执行删除操作'})
            }
        });
    });
 
    $("#btn5").on("click", function () {
        //底部提示
        layer.open({
            content: '一个没有任何按钮的底部提示'
            , skin: 'footer'
        });
    });
 
    $("#btn6").on("click", function () {
        //自定义标题风格
        layer.open({
            title: [
                '我是标题',
                'background-color: #FF4351; color:#fff;'
            ]
            , content: '标题风格任你定义。'
        });
    });
 
    $("#btn7").on("click", function () {
        //页面层
        layer.open({
            type: 1
            , content: '可传入任何内容，支持html。一般用于手机页面中'
            , anim: 'up'
            , style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
        });
    });
 
    $("#btn8").on("click", function () {
        //loading层
        layer.open({type: 2});
    });
 
    $("#btn9").on("click", function () {
        //loading带文字
        layer.open({
            type: 2
            , content: '加载中'
        });
    });
 
</script>

3、效果图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/93293