对话框/Tips

基于Bootstrap4的Toast提示插件

也想出现在这里?联系我们
面包多

基于Bootstrap4的Toast提示插件-创客云
这是一款基于 bootstrap4 的 toast 插件。该插件能非常方便的生成 toast 提示效果,不需要编写额外的 html 代码,非常实用。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
创客主机
  1. <!-- CSS -->
  2. <link rel="stylesheet" href="/path/to/bootstrap.min.css">
  3. <link rel="stylesheet" href="/path/to/toast.min.css">
  4.  
  5. <!-- JavaScript -->
  6. <script src="/path/to/jquery.min.js"></script>
  7. <script src="/path/to/popper.min.js"></script>
  8. <script src="/path/to/bootstrap.min.js" ></script>
  9. <script src="/path/to/toast.min.js"></script>

初始化插件

通过下面的方法来创建一个 toast 效果。

  1. $.toast({
  2.   title: 'Notice!',
  3.   subtitle: '11 mins ago',
  4.   content: 'This is a toast message.',
  5.   type: 'info',
  6.   delay: 3000,
  7.   img: {
  8.     src: 'image.png',
  9.     class: 'rounded',
  10.     title: 'Thumbnail Title',
  11.     alt: 'Alternative'
  12.   },
  13.   pause_on_hover: false
  14. });

配置参数

可用的配置参数有:

  • title:标题。
  • subtitle:子标题。
  • content:toast 的内容。
  • type:情景类型:'info', 'success', 'warning', 'error'。
  • delay:多少时间后自动消失。
  • img:如果要显示图片,该属性指定图片的信息。
  • pause_on_hover:是否在鼠标悬停时让 toast 不消失。

Github 网址:https://github.com/Script47/Toast

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!