web弹层组件-layer封装的工具类

不念不忘少年蓝@ 2022-07-13 05:10 234阅读 0赞

var colseTime = 2000;//2s
    /**
     * layer 是提示消息封装工具类
     */
    var Layer = {
        /**
         * 警告框 closeBtn:提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
         * @param {} content    警示的内容
         * @param {} title    警示的标题，如果为空默认为提示信息
         */
        showAlert : function(content,title){
        	var options = {icon:0,time:colseTime,closeBtn:0,btn:0,title:"提示信息",skin:'layui-layer-molv'};
        	if(title==null){
        		layer.alert(content,options); 
        	}else{
        		$.extend(options.title,title);
        		layer.alert(content,options); 
        	}
        		
        },
        /**
         * 操作成功提示框
         * @param {} content    提示内容  默认：操作成功
         * @param {} callback    回调方法
         */    
        showSucAlert : function (content,callback){
            var length = arguments.length ;   //  实际传入参数的长度
            var options = {icon:1,time:colseTime,btn:0,closeBtn:0,skin:'layui-layer-molv'};
            if(length == 0){  // 没有传入任何参数
               layer.alert("操作成功",options);
            }else if(length == 1){ // 传入了提示内容
               layer.alert(content,options);
            }else if(length == 2){  // 有回调函数的,将不自动关闭
               layer.alert(content,{icon:1},callback);
            }
        },
        /**
         * 加载消息提示框 2s后自动关闭
         * @param {} content 提示内容
         * @param {} callback 回调函数
         */
       showLoad : function(){
    	  layer.load(0, {shade: false,time:colseTime}); //0代表加载的风格，支持0-2
       },
       /**
        * tips消息提示框 
        * @param {} divId 绑定元素的id
        * @param {} content 提示内容
        */
       showTips : function(divId,content){
    	   $('#'+divId).on('click', function(){
    		   var that = this;
    		   layer.tips(content, that); //在元素的事件回调体中，follow直接赋予this即可
    		 });
       },
       
        /**
         * 操作失败提示框
         * @param {} content    提示内容 默认：操作失败
         * @param {} time       关闭时间(单位毫秒) 默认：1S,0:表示不自动关闭  
         */
        showFailAlert : function(content,time){
            var length = arguments.length ;   //  实际传入参数的长度
            var options = {icon:2,time:colseTime};
            if(length == 0){  // 没有传入任何参数
               layer.alert("操作失败",options);
            }else if(length == 1){ // 传入了提示内容
               layer.alert(content,options);
            }else if(length == 2){ // 传入了关闭时间
                options.time = time ;
               layer.alert(content,options);
            }
        },
        /**
         * 打开一个对话框(没有回调函数)
         * @param {} title       对话框标题(必须)
         * @param {} url        对话框URL(必须)
         * @param {} width        对话框宽度 默认：800px
         * @param {} height        对话框高低 默认：600px
         */
        openDialogNoCallBack : function(title,url,width,height){
           layer.open({
                type : 2,
                title : title ,
                content : url ,
                maxmin: true,
                area: [width, height]
            });
        },
        /**
         * 获取当前的窗口对象
         * @return {}
         */
        getCurrentWin : function(){
            return this.topWin.frames['ifr_center'] ;
        },
    
        /**
         * 打开一个对话框(带回调函数)
         * @param {} title       对话框标题(必须)
         * @param {} url        对话框URL(必须)
         * @param {} width        对话框宽度 默认：800px
         * @param {} height        对话框高低 默认：600px
         */
        openDialogWithCallBack : function(title,url,width,height,callback){
           layer.open({
                type : 2,
                title : title ,
                content : url ,
                area: [width, height],
                maxmin: true,
                end  : callback
            });
        },
            /**
         * 打开一个对话框(没有回调函数)
         * @param {} title       对话框标题(必须)
         * @param {} url        对话框URL(必须)
         * @param {} width        对话框宽度 默认：800px
         * @param {} height        对话框高低 默认：600px
         * @param {} callback   窗口销毁时的回调方法
         */
        openDialog : function(title,url,width,height,callback){
            var length = arguments.length ;   //  实际传入参数的长度
            if(length == 2){   // 默认宽高
                this.openDialogNoCallBack(title,url,this.width,this.height)
            }else if(length == 3){  // 只传入宽度参数
                width += this.px ;
                this.openDialogNoCallBack(title,url,width,this.height)
            }else if(length == 4){  // 传入宽度和高度
                 width += this.px ;
                 height += this.px ;
                 this.openDialogNoCallBack(title,url,width,height)
            }else if(length == 5){   // 带回调函数
                 width += this.px ;
                 height += this.px ;
                 this.openDialogWithCallBack(title,url,width,height,callback);
            }
        },
        
        /**
         * 关闭弹出层
         * @param {} index
         */
        closeLayer : function(index){
           layer.close(index);
        },
        /**
         * 关闭所有的Dialog
         */
        closeDialog : function(){
            layer.closeAll('iframe');
        },
        /**
         * 关闭Dialog带有操作成功的提示
         * @param {} content
         */
        closeDialogWithMsg : function(content){
        	layer.closeAll('iframe');
            if(!content) content = "操作成功" ;
            this.showSucMsg(content);
        },
        /**
         * 显示提示框
         * @param {} content
         */
        showMsg : function(content,callback){
           layer.msg(content,{time:colseTime},callback) ;
        },
        /**
         * 显示操作成功的提示框
         * @param {} content
         */
        showSucMsg : function(content,callback){
           if(!content) content = "操作成功" ;
           layer.msg(content,{icon: 1,time:colseTime},callback) ;
        },
        /**
         * 显示验证框
         * @param {} content   提示内容
         * @param {} title 提示标题
         * @param {} yesFunction 确定以后的回调函数
         */
        showConfirm : function(content,title,yesFunction){
        	var options = {
                    btn: ['确定', '取消'],
                    icon : 3,
                    title:title,
                    skin:'layui-layer-molv'
                };
           layer.confirm(content,options,yesFunction);
        }
        
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关学习layer弹层组件移动版

layer弹层组件官网][layer] 常用参数： shadeClose：默认true，是否点击遮罩时关闭层转载于:https://www.cnblogs.com...

淩亂°似流年/ 2024年04月20日 10:54/ 0 赞/ 57 阅读

相关【前端-layui-layer】layui弹出层闪退，layer弹出层闪退，layer弹出层坑

今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事件还未绑定到任何按钮，可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退

我不是女神ヾ/ 2023年07月05日 11:53/ 0 赞/ 47 阅读

相关封装的influxDB工具类

最近在使用influxDB，但是在网上找了很多工具类都不是很好用。大家都知道influxDB查询出来的数据格式不是json格式，比较难以处理，很多网上的工具类都没有对查询

╰+攻爆jí腚メ/ 2023年06月18日 06:52/ 0 赞/ 33 阅读

相关 ElementUI （dialog弹框）封装在组件中在父组件调用

再记一遍dialog在父组件中的调用问题！！具体实现：v-for循环生成的一个card信息，点击详情查看该card具体信息，详情页在dialog里显示。 ![在这里插

刺骨的言语ヽ痛彻心扉/ 2022年12月27日 11:05/ 0 赞/ 341 阅读

相关 layer 弹出层

使用方法：一、引入 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></scrip

约定不等于承诺〃/ 2022年07月24日 07:03/ 0 赞/ 365 阅读

相关 web弹层组件-layer封装的工具类

var colseTime = 2000;//2s / layer 是提示消息封装工具类 / var Layer = {

不念不忘少年蓝@/ 2022年07月13日 05:10/ 0 赞/ 235 阅读

相关 ShareSDKUtils，封装的分享工具类

介绍 ShareSDKUtils是基于ShareSDK提供的API进行封装的工具类，方便于我们开发时分享的调用，支持使用默认的GUI，也支持自定义界面，点击事件中调用分享

小咪咪/ 2022年06月10日 04:48/ 0 赞/ 275 阅读

相关使用joda-time封装的日期工具类

public class DateTimeUtil { public static final String STANDARD_FORMAT = "yy

谁践踏了优雅/ 2022年06月02日 02:54/ 0 赞/ 228 阅读

相关 layui弹出层闪退，layer弹出层闪退，layer弹出层坑

转载: http://www.mamicode.com/info-detail-1654730.html 今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事

桃扇骨/ 2022年05月22日 04:30/ 1 赞/ 489 阅读

相关 layer弹出层

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layu

清疚/ 2021年09月15日 07:26/ 0 赞/ 616 阅读