介绍一个轻量级别的提示弹窗插件（MyukiToast）

今天web建站小编给大家介绍一个轻量级别的提示弹窗插件（MyukiToast），下面给大家简单介绍一下用法！

代码用法如下：

<link type="text/css" rel="stylesheet" href="./css/myukitoast.css"/>
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./js/myukitoast.js"></script>
<div id="toastDemo">
</div>
<script>
document.ready(function(){
   
// 创建一个MyukiToast的实例
   
let toastObj = $MT("#toastDemo") 
  /*or toastObj = MyukiToast("#toastDemo");
  $MT == MyukiToast;
     
  */
  // 调用toast方法
     
  toastObj.toast("欢迎使用Myuki Toast");
})
</script>

基本参数介绍：

/*selector: id | className | tag
  如果没有选择器，或者提供的选择器不存在，将会自动创建一个选择器添加到document中（#MyukiToast-时间戳）
  */
  {
   "z_index": 999, 
   //default: 9999
   "position": 'left',
   /* default: center
   left | center | right,
   */
   "width": '50%',
   "top": "32px",
   "type": 'danger',
   /* 默认值: primary
   消息弹框的类型，包括以下几种：
   primary, secondary, success, danger,
   warning, info, light, dark
   */
   "message": '欢迎使用Myuki Toast', 
   /*默认的消息，创建MyukiToast实例后，调用toast()方法时，
   如果没有提供消息，将会使用默认的消息
   执行下面的语句将会弹出消息："欢迎使用Myuki Toast"
   toastObj.toast()
   */
   "dismissible": true, 
   /* 默认值: false
   是否显示关闭按钮
   */
   "animation": 'heartbeat', 
   /* 默认值: noanimation
   消息弹框的动画
   heartbeat, normal-shake, jello-horizontal, 
   wobble-hor-bottom, vibrate-1, noanimation
   你也可是自己设计css动画
   */
   "maxExist": 10, 
   /* 默认值: 10
   document中消息弹框的最大数量（包括已经隐藏的消息弹框），如果超出
   最大值，将会移除超出的消息弹框
   */
   "autoHide": true,
   /* 默认值: true
   消息弹框是否自动隐藏，如果将autoHide设置为false，请务必
   将dismissible设置为true
   */
   "autoHideAnimation": 'originFade',
   /* 默认值: nohideanimation
   消息弹框自动隐藏的动画
   scale-out-center, fade-out, originFade, rotate-out-center,
   puff-out-center, slide-out-top, nohideanimation
   你同样可以自己设计css动画
   */
   "originFadeDuration": 1000,
   /* 默认值: 800
   只对动画 'originFade' 有效，原生fadeOut的时长
   */
   "autoHideDelay": 5000,
   /* 默认值: 3000
   弹框自动隐藏的延迟时间
   */
   "type": 'danger',
   /* 默认值: primary
   消息弹框的类型，包括以下几种：
   primary, secondary, success, danger,
   warning, info, light, dark
   */
   "message": '欢迎使用Myuki Toast', 
   /*默认的消息，创建MyukiToast实例后，调用toast()方法时，
   如果没有提供消息，将会使用默认的消息
   执行下面的语句将会弹出消息："欢迎使用Myuki Toast"
   toastObj.toast()
   */
   "dismissible": true, 
   /* 默认值: false
   是否显示关闭按钮
   */
   "fade": true, 
   /* 默认值: true
   消息自动隐藏时，是否使用fadeOut的效果
   */
   "fadeDelay": 1000, 
   /* 默认值: 800
   fadeOut的时长
   */
   "autoHide": true,
   /* 默认值: true
   消息弹框是否自动隐藏，如果将autoHide设置为false，请务必
   将dismissible设置为true
   */
   "autoHideDelay": 5000,
   /* default: 3000
   自动隐藏的时长
   */
   "color": '#666',
   "fontSize": '16px',
   "fontFamily": 'sans-serif'

js用最简单的方法实现2个数组的交叉一对一合并

如何利用js语法将2个数组进行交叉合并

利用js语法把数组根据相同key转换成嵌套数组格式

javascript语法如何把json文件输出到html页面上

js点击按钮从服务器上下载json文件（不是打开文件）

标签： MyukiToast, 弹窗插件

上面是“介绍一个轻量级别的提示弹窗插件（MyukiToast）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2798.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！