菜单 搜索
首页 前端知识 jquery实现自定义消息提示组件及confirm

jquery实现自定义消息提示组件及confirm

2024-08-12 10:08:24 前端知识 前端哥 370 38 我要收藏

目录结构

message

  • icon
    • error.svg
    • warning.svg
    • success.svg
    • normal.svg
  • index.css
  • index.js
  • index.html

效果图

在这里插入图片描述

配置项

  • close:false,
  • actionFns:null,
  • message:‘’,
  • boxClass:‘’,
  • iconClass:‘’,
  • endClass:‘’,
  • textClass:‘’,
  • endHtml:‘’,
  • placement:‘top’
  • time:4000
  • parent:‘body’
  • 提供四种基础样式
    • 默认：default
    • 成功：success
    • 警告：warning
    • 失败：error

代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./index.css" rel="stylesheet" type="text/css"  />
</head>
<body>
    <button class="btn1">btn1</button>
    <button class="btn2">btn2</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="./index.js"></script>
    <script>
        var num = 0;
        const btn1 = document.querySelector('.btn1')
        btn1.addEventListener('click',function(){
            yhmessage('这是一段文本' + num++)
        })

        const btn2 = document.querySelector('.btn2')
        btn2.addEventListener('click',function(){
            yhconfirm('这是一段文本',function(){
                console.log(123);
            })
        })
    </script>
</body>

</html>

index.css

.yh-message {
    display: flex;
    justify-content: space-between;
    position: fixed;
    min-width: 640px;
    height: 40px;
    border: 1px solid;
    border-radius: 4px;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    color: #262626;
}

.yh-message .messager-content {
    display: flex;
    align-items: center;
}

.yh-message.top {
    top: 24px;
}

.yh-message.bottom {
    bottom: 24px;
}

.yh-message.center {
    top: 50%;
    transform: translate(-50%, -50%);
}

.yh-message .close {
    cursor: pointer;
    color: #8C8C8C;
}

.yh-message .icon {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.yh-message .icon.normal {
    background: url(./icon/normal.svg) no-repeat;
}

.yh-message .message_close {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url(./icon/close.svg) no-repeat;
    cursor: pointer;
}

.yh-message .icon.warning {
    background: url(./icon/warning.svg) no-repeat;
}

.yh-message .icon.error {
    background: url(./icon/error.svg) no-repeat;
}

.yh-message .icon.success {
    background: url(./icon/success.svg) no-repeat;
}

.yh-message.yh-message-default {
    border-color: #00C2CE;
    background-color: rgba(0, 194, 206, 0.1);
}

.yh-message.yh-message-success {
    border-color: #0EC885;
    background-color: rgba(14, 200, 133, 0.1);
}

.yh-message.yh-message-warning {
    border-color: #FAAD10;
    background-color: rgba(250, 173, 16, 0.1);
}

.yh-message.yh-message-error {
    border-color: #EF5615;
    background-color: rgba(239, 86, 21, 0.1);
}



.yh-confirm-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 32px;
    background-color: #FFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    width: 480px;
    color: #262626;
}

.yh-confirm-box .title-box {
    display: flex;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
}

.yh-confirm-box .title-box .icon {
    margin-right: 16px;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.yh-confirm-box  .content{
    margin: 8px 24px 24px 40px;
}

.yh-confirm-box .icon.warning {
    background: url(./icon/warning.svg) no-repeat;
}

.yh-confirm-box .icon.normal {
    background: url(./icon/normal.svg) no-repeat;
}

.yh-confirm-box .operate{
    text-align: end;
}

.yh-confirm-box .operate .btn{
    padding: 5px 16px;
    color: #262626;
    line-height: 22px;
    margin-left: 8px;
    background-color: #FFF;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
}

.yh-confirm-box .operate .btn.btn-primary{
    color: rgba(255,255,255);
    background-color:rgba(0, 170, 235) ;
    border: 0px;
}

index.js


(function(){
    var id = 0;
    var all = {};
    var DEFAULTS = {
        type:'default',
        iconClass:'warning',
        title:'信息提示',
        message:'这是一段文案',
        cancelText:'取消',
        confirmText:'确定',
        showCancel:true,
        showConfirm:true,
        cancelCb:null,
        confirmCb:null,
        parent:'body'
    };

    var template = '<div class="yh-confirm-box-mask"><div class="yh-confirm-box"><div class="title-box"><div class="icon {iconClass}"></div><div class="title">{title}</div></div><div class="content">{contentText}</div><div class="operate"></div></div></div>'
    var Confirm = function(options,confirmCb,cancelCb){
        var that = this;// 如果传进来的是对象则兼容直接为配置项
        if(!$.isPlainObject(options)) {
            options = {
                message:options
            }
        }
        // 兼容回调参数直接传参写法
        if(confirmCb){
            options.confirmCb = confirmCb
        }
        // 兼容回调参数直接传参写法
        if(cancelCb){
            options.cancelCb = cancelCb
        }
        var that = this;
        options = that.options = $.extend({},DEFAULTS, options);
        that.id = options.id || (id++);
        // 如果存在相同id，则需要销毁原来的
        var oldMConfirm = all[that.id];
        if(oldMConfirm) oldMConfirm.destroy();
        that.$ = $(template.replace('{iconClass}',options.iconClass).replace('{title}',options.title).replace('{contentText}',options.message)).attr('id',"yh-confirm"+that.id);
        // 添加取消按钮
        if(options.showCancel){
            var cancelBtn = $('<button class="btn">'+ options.cancelText + '</button>');
            cancelBtn.on('click',function(){
                that.destroy();
                if(options.cancelCb && typeof options.cancelCb === 'function'){
                    options.cancelCb()
                }
            })
            that.$.find('.operate').append(cancelBtn);
        } 
        // 添加确认按钮
        if(options.showConfirm){
            var confirmBtn = $('<button class="btn btn-primary">'+ options.confirmText + '</button>');
            confirmBtn.on('click',function(){
                that.destroy();
                if(options.confirmCb && typeof options.confirmCb === 'function'){
                    options.confirmCb()
                }
            })
            that.$.find('.operate').append(confirmBtn);
        } 

        // 添加到父级
        $(options.parent).append(that.$);
        all[that.id] = that;
        return that
    }

    Confirm.prototype.destroy =  function(){
        var that = this;
        that.$.hide();
        that.$.remove();
        that.$ = null;
        delete all[that.id];
    }

    function init(options,confirmCb,cancelCb){
        var msg = (options && options.id && all[options.id]) || new Confirm(options,confirmCb,cancelCb)
        return msg;
    }

    $.yhconfirm = window.yhconfirm = init
})();


(function(){
    var id = 0;
    var all = {};
    var len = 0;
    var DEFAULTS = {
        type:'default',
        close:false,
        actionFns:null,                     
        message:'',   
        boxClass:'',    
        iconClass:'normal',
        endClass:'',      
        textClass:'',               
        endHtml:'',                                     
        placement:'top',
        time:3000,
        parent:'body' ,
    };
    var template = '<div class="yh-message yh-message-{type} {placement}"><div class="messager-content"></div><div class="messager-actions"></div></div>'
    
    var Messager = function(message,options){
        // 如果传进来的是对象则兼容直接为配置项
        if($.isPlainObject(message)) {
            options = message;
            message = options.message;
        }
        var that = this;
        options = that.options = $.extend({},DEFAULTS, options);
        that.id = options.id || (id++);
        // 如果存在相同id，则需要销魂原来的
        var oldMessager = all[that.id];
        if(oldMessager) oldMessager.destroy();
        that.message =  (options.iconClass ? '<span class="icon '+ options.iconClass +'"></span>':'') + (options.textClass ? '<span class="'+ options.textClass +'">'+ message +'</span>':'<span>' + message + '</span>')  ;
        // 创建元素
        that.$ = $(template.replace('{type}',options.type).replace('{placement}',options.placement)).attr('id',"yh-messager"+that.id);
        that.$.find('.messager-content').append($(that.message));
        // 添加外层盒子类名
        if(options.boxClass) that.$.addClass(options.boxClass);
        // 当前消息框的事件
        var $actions = that.$.find('.messager-actions');
        // 处理删除
        if(options.close){
            options.endHtml = "<span class='message_close'></span>"
            options.actionFns = function(e){
                that.destroy()
            }
        }
        if(options.endHtml){
            var end = $(options.endHtml);
            // 绑定事件
            end.on('click',function(e){
                if($.isFunction(options.actionFns)){
                    options.actionFns.call(this,that)
                }
                e.stopPropagation()
            })
            $actions.append(end)
        }
        if(options.placement === 'top'){
            len++
            that.$.css({
                top:(len * 56 - 40) + 'px'
            })
        }
        // 添加到父级
        $(options.parent).append(that.$);
        all[that.id] = that;
        if(!options.close){
            setTimeout(() => {
                that.destroy()
            }, options.time);
        }
        return that
    }

    // 销毁原来的提示框
    Messager.prototype.destroy = function() {
        var that = this;
        that.$.hide();
        that.$.remove();
        that.$ = null;
        delete all[that.id];
        if(that.options.placement === 'top'){
            len--
            // 还需要改变已存在的位置
            Object.values(all).forEach(el=>{
                el.$.css({
                    top:(Number(el.$[0].style.top.replace('px',''))-56) + 'px'
                })
            })
        }
    };

    function init(message,options){
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    function initSuccess(message,options){
        if($.isPlainObject(message)) {
            options = message;
            message = options.message;
        }
        options = $.extend({},options,{type:'success' , iconClass:'success'})
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    function initWarning(message,options){
        if($.isPlainObject(message)) {
            options = message;
            message = options.message;
        }
        options = $.extend({},options,{type:'warning' , iconClass:'warning'})
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    function initError(message,options){
        if($.isPlainObject(message)) {
            options = message;
            message = options.message;
        }
        options = $.extend({},options,{type:'error' , iconClass:'error'})
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    $.yhmessage = window.yhmessage = init
    $.yhmessage.success = window.yhmessage.success = initSuccess
    $.yhmessage.warning = window.yhmessage.warning = initWarning
    $.yhmessage.error = window.yhmessage.error = initError

})();
转载请注明出处或者链接地址：https://www.qianduange.cn//article/15375.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！