jquery实现自定义消息提示组件
创始人
2025-05-29 04:57:44

目录结构

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


Document



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);
}

index.js


(function(){var id = 0;var all = {};var DEFAULTS = {type:'default',close:false,actionFns:null,                     message:'',   boxClass:'',    iconClass:'normal',endClass:'',      textClass:'',               endHtml:'',                                     placement:'top',time:1000,parent:'body' ,};var template = '
'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 ? '':'') + (options.textClass ? ''+ message +'':'' + message + '') ;console.log(that.message);// 创建元素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 = ""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)}// 添加到父级$(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];};function init(message,options){var msg = (options && options.id && all[options.id]) || new Messager(message, options)return msg;}function initSuccess(message,options){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){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){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})()

相关内容

热门资讯

cad打印线条粗细设置 cad... 004-线型(下)打印样式设置和线型文件使用一、线宽设置方法制图规范里边的线宽要求,我们已经定义好,...
荼蘼什么意思 岁月缱绻葳蕤生香... 感谢作者【辰夕】的原创独家授权分享编辑整理:【多肉植物百科】百科君坐标:云南 曲靖春而至,季节流转,...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
阿西吧是什么意思 阿西吧相当于... 即使你没有受到过任何外语培训,你也懂四国语言。汉语:你好英语:Shit韩语:阿西吧(아,씨발! )日...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...