基于Bootstrap4的Toast提示插件
这是一款基于bootstrap4的toast插件。该插件能非常方便的生成toast提示效果,不需要编写额外的html代码,非常实用。
使用方法
在页面中引入下面的文件。
<!-- CSS --> < link rel = "stylesheet" href = "/path/to/bootstrap.min.css" > < link rel = "stylesheet" href = "/path/to/toast.min.css" > <!-- JavaScript --> < script src = "/path/to/jquery.min.js" ></ script > < script src = "/path/to/popper.min.js" ></ script > < script src = "/path/to/bootstrap.min.js" ></ script > < script src = "/path/to/toast.min.js" ></ script > |
初始化插件
通过下面的方法来创建一个toast效果。
$.toast({ title: 'Notice!' , subtitle: '11 mins ago' , content: 'This is a toast message.' , type: 'info' , delay: 3000, img: { src: 'image.png' , class: 'rounded' , title: 'Thumbnail Title' , alt: 'Alternative' }, pause_on_hover: false }); |
配置参数
可用的配置参数有:
title
:标题。subtitle
:子标题。content
:toast的内容。type
:情景类型:'info', 'success', 'warning', 'error'。delay
:多少时间后自动消失。img
:如果要显示图片,该属性指定图片的信息。pause_on_hover
:是否在鼠标悬停时让toast不消失。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战