推荐使用jsMessage:轻量级自定义消息通知库

推荐使用jsMessage:轻量级自定义消息通知库

项目地址:https://gitcode.com/gh_mirrors/mess/message

项目介绍

jsMessage 是一个从 DHTMLX suite 中提取出来的轻量级JavaScript库,专门用于创建自定义的通知、警告和确认对话框。该库遵循 MIT 许可证,意味着你可以免费且自由地使用它。jsMessage 以其极小的体积(仅4kb gzipped)和无外部依赖的特点,成为了前端开发中的理想选择。

项目技术分析

jsMessage 提供了四种消息类型:alert、confirm、notification 和 modalbox。每种类型都可以通过简单的JavaScript调用进行配置,支持自定义标题、内容、按钮文本以及回调函数。此外,jsMessage 还允许通过CSS类来定义消息窗口的样式,提供了极大的灵活性。

项目及技术应用场景

jsMessage 适用于各种需要用户交互的Web应用场景,例如:

  • 表单验证:在用户提交表单时显示错误或成功消息。
  • 操作确认:在进行删除或重要操作前,请求用户确认。
  • 系统通知:向用户展示系统更新或重要信息。
  • 模态对话框:展示复杂内容或需要用户输入的界面。

项目特点

  • 轻量级:仅4kb gzipped,无外部依赖,加载迅速。
  • 跨浏览器兼容性:支持 Firefox、Chrome、Safari(包括 iPhone)、Opera 和 IE7+。
  • 高度可定制:支持自定义样式和消息类型,满足各种设计需求。
  • 简单易用:通过简单的JavaScript调用即可实现复杂的消息通知功能。
  • 免费开源:遵循 MIT 许可证,你可以自由地使用和修改。

通过 jsMessage,你可以轻松地为你的Web应用添加美观且功能强大的消息通知系统,提升用户体验。立即尝试,让你的应用更加出色!

message Custom messages, alerts, confirmations message 项目地址: https://gitcode.com/gh_mirrors/mess/message

spop.js是一款纯js toast消息提示通知插件。通过spop.js插件,你可以快速的在网页上制作出漂亮的toast消息提示效果。该js toast消息提示插件的特点还有: 内置4种主题样式:default, success, warning, error。 toast可以显示在屏幕的6个位置:top-left, top-center, top-right, bottom-left, bottom-center, bottom-right。 可以对消息提示进行编组。 提供打开和关闭消息提示时的回调函数。 支持HTML内容。 使用方法 在页面中引入spop.css和spop.js文件。 <link rel="stylesheet" type="text/css" href="./css/spop.css"> [removed][removed] 初始化toast 该js toast消息提示插件最基本的使用方法如下: spop('Default SmallPop'); spop('<h4 class="spop-title">Success</h4>I´m a success SmallPop', 'success'); spop('<strong>Warning pop</strong>', 'warning'); spop('<strong>Error Here!</strong>', 'error'); 分组 可以对消息进行分组,分组后的消息每次只显示一条。 spop({ template: 'All fields are required!', group: 'submit-satus', style: 'error' }); spop({ template: 'Your information has been submitted', group: 'submit-satus', style: 'success' autoclose: 2000 }); 回调函数 在toast消息提示打开和关闭时都可以使用回调函数。 spop({ template: 'Please, close me.', onOpen: function () { document.body.style.background = "#fff"; }, onClose: function() { document.body.style.background = ""; spop({ template: 'Thank you!', style: 'success', autoclose: 2000 }); } }); 配置参数 spop.js消息提示插件的可用配置参数如下: spop({ template : null,// string required. Without it nothing happens! style : 'info',// success, warning or error autoclose : false,// miliseconds position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right icon : true,// or false group : false,// string, add a id reference onOpen : funtion() { }, onClose : funtion() { } }); template :消息提示的模板。可以是一个字符串,或这是HTML代码。 style :toast消息提示的主题样式,可以是info,success, warning 或 error。 autoclose :是否自动关闭。 position :toast消息提示的位置。可以是:top-right,top-left,top-center,bottom-left,bottom-center或bottom-right。 icon :是否显示图标。 group :是否对消息进行分组。 onOpen :toast消息提示打开时的回调函数。 onClose :toast消息提示关闭时的回调函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霍忻念

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值