js:jquery-toast-plugin实现消息提示

简介: js:jquery-toast-plugin实现消息提示

jquery-toast-plugin

github: https://github.com/kamranahmedse/jquery-toast-plugin

微信截图_20211126113857.png

说明:

jquery-toast-plugin 依赖jQuery


代码示例

<!-- 依赖jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- toast -->
<link rel="stylesheet" type="text/css" href="./jquery.toast.min.css">
<script type="text/javascript" src="./jquery.toast.min.js"></script>
<script>
$.toast({
  text: 'info',
  icon: 'info',
  position: 'top-center',
  loader: false
})
$.toast({
  text: 'warning',
  icon: 'warning',
  position: 'top-center',
  loader: false
})
$.toast({
  text: 'error',
  icon: 'error',
  position: 'top-center',
  loader: false
})
$.toast({
  text: 'success',
  icon: 'success',
  position: 'top-center',
  loader: false
})
 </script>

效果

8.png


相关文章
|
JavaScript 前端开发
javascript深拷贝和浅拷贝以及实现方法(推荐)
javascript深拷贝和浅拷贝以及实现方法(推荐)
528 0
javascript深拷贝和浅拷贝以及实现方法(推荐)
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
167 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
219 0
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
153 0
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
365 0
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
271 1
|
算法 前端开发 JavaScript
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
113 0
|
JavaScript 前端开发 算法
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
191 0