layer组件的使用

最新推荐文章于 2024-09-26 07:41:32 发布

一颗冉冉升起的新星

最新推荐文章于 2024-09-26 07:41:32 发布

阅读量3.6k

点赞数 3

分类专栏：插件文章标签：弹出框移动端弹出框 js弹出框提示框

本文链接：https://blog.csdn.net/chenxueshanBlog/article/details/78853727

版权

插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

layer组件有pc端和移动端两个版本，不同版本针对不同终端呈现出不同的效果。
官方演示与讲解（针对pc）以及下载地址：http://layer.layui.com/
layer 移动版官方地址：http://layer.layui.com/mobile/
本文主要介绍layer在移动端的使用方式。下载完成后只需用到mobile文件夹下的两个文件（可将mobile文件夹改名字copy出来），不要改变里面的文件路径。

layer组件可实现的功能简介

移动端可弹出：信息框、提示、询问框、底部对话框、底部提示、（可自定义标题风格的）弹出框、底部弹出框、loading层（可带可不带文字）
实现上面的这些功能只需参考最上面的官方地址，里面有实现方法。比较常用到的几个如下：

layer.open({ content: 'hello layer', skin: 'msg', time: 2 }); //提示
layer.open({ type: 2, content: '加载中，请稍候' });  //loading带文字
layer.open({ content: '移动版和PC版不能同时存在同一页面', btn: '我知道了' });  //信息框
layer.open({ content: '您确定 ... 吗？', btn: ['确定', '取消'], yes: function(index){ location.reload(); layer.close(index); }});  //询问框
layer.open({ title: [ '我是标题', 'background-color: #FF4351; color:#fff;' ], content: '标题风格任你定义。' });  //自定义标题风格

下面两个是我自己喜欢用的提示框方式：

layer.open({ content: str, skin: 'msg', time: 2 });  //轻提示
layer.open({ content: '<p><img src="img/error.png"></p><br>获取信息失败', time: 3 });  //自己改装的 给信息框加了个图片的 提示（需要手动改样式）

其中的可选参数：（前面加 * 的为必选参数）

type - 设置弹层的类型（0表示信息框，1表示页面层，2表示加载层），默认0
*content - 设置弹层内容（String）
title - 设置弹层标题（String/Array）
time - 控制自动关闭层所需秒数（Number）
skin - 设定弹层显示风格（footer（即底部对话框风格）、msg（普通提示））
className - 自定义一个css类（String）
btn - 按钮（不设置不显示 / 1个：”确定” / 2个：[“确定”,”取消”]，最多两个）
anim - 动画类型（scale（默认）、up（从下往上弹出）、false（没有动画））
shade - 控制遮罩展现（true：显示遮罩、false不显示遮罩）
shadeClose - 是否点击遮罩时关闭层（默认true）
success - 成功弹出层的回调函数（参数为当前层元素对象）
yes - 点确定按钮触发的回调函数（参数为当前层的索引）
no - 点取消按钮触发的回调函数
end - 层彻底销毁后的回调函数

关闭层：

layer.close(index) - 用于关闭特定层，index为该特定层的索引（一般用于yes的回调函数中）
layer.closeAll() - 关闭页面所有layer的层（一般用于关闭loading层）

点击按钮弹出表单询问框实例

通过上面的介绍完全可以实现一个弹出框功能了，在这里要介绍的不是在弹出框中进行简单的文本显示，而是在弹出框（询问框）中显示一个form表单。

因为content参数只能传递String类型的数据，而不能传递DOM元素来加载（用DOM的话弹出框中显示为[object object]）。所以这里做了个处理，在询问框弹出之后（即success参数的回调函数中），动态渲染询问框中form表单的DOM元素。代码如下：

要引入的文件：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/layer.js"></script>

CSS样式：

 .addShop { display: block; color: #fff; background: #00CC99; border: none; font-size: 14px; width: 50vw; margin: 1rem 0 0 25vw; padding: 0.32rem; border-radius: 0.8rem; }
#addShopForm { display: none; }
/*为layer组件自定义样式*/
.addShopStyle .layui-m-layerbtn span[yes] { color: #0c9; }
.addShopStyle .layui-m-layerbtn span[no] { color:#333; }
.addShopStyle { width: 9rem; border-radius: 0.16rem; }
.layui-m-layer1 .addShopStyle > .layui-m-layercont { padding: 0.4rem 0.4rem 0.266667rem; }
.addShopStyle h3{ height: 1.173333rem; line-height: 1.226667rem; background: #f2f2f2; border-bottom: 1px solid #e8e8e8; }
.addShopStyle form > div { text-align: center; margin-bottom: 0.133333rem; }
.addShopStyle label { display: inline-block; height: 1.066667rem; line-height: 1.066667rem; }
.addShopStyle input, .addShopStyle select{ width: 5.12rem; height: 0.906667rem; border: 1px solid #CFCFCF; border-radius: 0.133333rem; padding-left: 0.16rem; margin-left: 0.133333rem; background-color: #fff; }
.addShopStyle span { color: #0c9; margin-left: 0.133333rem; }
.addShopStyle .time > div { display: inline-block; width: 5.333333rem; margin-left: 0.133333rem; }
.addShopStyle .time > div input { width: 2.2rem; height: 0.906667rem; border: 1px solid #CFCFCF; border-radius: 0.133333rem; padding-left: 0.16rem; margin-left: 0; }
.addShopStyle .perHead input { width: 1.5rem; }
.addShopStyle .perHead p { display: inline-block; width: 2.9rem; }

HTML代码：

<button type="button" id="addShop" class="addShop">新增商铺</button>

<!--新增商铺（弹出框中内容）-->
<form action="" method="post" name="addShopForm" id="addShopForm" >
    <div>
        <label>商铺名称：<input type="text" name="shopName" id="shopName" placeholder="请输入商铺名称" data-info="请输入商铺名称" /></label>
        <span>*</span>
    </div>
    <div>
        <label>商铺类型：<select name="shopType" id="shopType" data-info="请选择商铺类型"><option value="">请选择</option><option value="1">类型一</option><option value="2">类型二</option></select></label>
        <span>*</span>
    </div>
    <div>
        <label>具体地址：<input type="text" name="detailAddress" id="detailAddress" placeholder="请输入具体地址" data-info="请输入具体位置" /></label>
        <span>*</span>
    </div>
    <div>
        <label>联系电话：<input type="tel" name="telPhone" id="telPhone" placeholder="如带区号，请用 - 分隔" data-info="请输入联系电话" /></label>
        <span>*</span>
    </div>
    <div class="perHead">
        <label>人均消费：<input type="tel" name="perHead" id="perHead" data-info="请输入人均消费金额" /></label> 元
        <span>*</span>
        <p class="null"></p>
    </div>
</form>

JS代码：

$(function(){
    var formDom = $("#addShopForm");    //获取页面初始化时的form元素节点
    var dataObj = {'shopName':'','shopType':'','detailAddress':'','telPhone':'','perHead':''};  //变量dataObj - 用于存储且提交表单数据
    $("#addShop").on("click",function(){     //点击[新增商铺]按钮，弹出表单
        layer.open({
            type: 1,
            title: '请输入商铺信息',
            btn: ['新增','取消'],
            className: 'addShopStyle',    //如需要自定义样式，自定义一个类名
            shadeClose: false,
            content: '',
            success: function(elem){    //将body下的form表单转移到layer弹框下
                $("#addShopForm").remove();
                formDom.css("display","block").appendTo($(elem).find(".layui-m-layercont"));
            },
            yes: function(index){    //点击弹框的[新增]按钮，进行 表单验证 和 表单提交 操作
                if(validateResult(dataObj)){    //表单验证成功。调用腾讯地图，获取 具体地址 的经纬度，并存入dataObj对象
                    console.log(dataObj);
                    //****************注意：dataObj对象就是最终要获取的表单json数据了，这里可以用ajax直接把它传给后台
                }
            }
        });
    });
    function  validateResult( data ){    //表单验证
        for(key in data){
            var inpValue = $("#"+key).val();
            if(inpValue == ''){    //验证所有表单是否为空
                briefPlayer($("#"+key)[0].dataset.info,"#"+key);
                return false;
            }else if(key == 'telPhone'){   //验证联系电话是否合法
                //下面依次判断是否为 手机号/带区号的电话号/不带区号的电话号
                var result = (/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(inpValue)) ? "true" :
                        (/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/.test(inpValue)) ? "true" :
                                (/^(\d{7,8})(-(\d{3,}))?$/.test(inpValue)) ? "true" : "false";
                if(result == "false"){
                    briefPlayer("请输入正确的联系电话","#"+key);
                    return false;
                }
            }else if( key == 'perHead' ){    //验证人均消费
                if(!(inpValue > 0)){
                    briefPlayer("人均消费格式错误","#"+key);
                    return false;
                }
            }
            dataObj[key] = inpValue;    //将验证通过的值存入dataObj对象
        }
        return true;
    }
    function briefPlayer(str,domStr){   //表单验证不通过
        layer.open({ content: str, skin: 'msg', time: 2 });    //给出提示
        $(domStr).focus();    //不通过的表单获得焦点
    }
});