前端Toast提示快速入门

news2025/2/26 1:35:54

🙉专栏推荐:Java入门知识🙉

🐹今日诗词:十年一觉扬州梦，赢得青楼薄幸名🐹

⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏

简单介绍一下Toast:

Toast是一种轻量级不打断用户当前操作流程, 为用户提供操作后的实时反馈（如提交成功、网络错误等)

组件下载

使用之前需要下载toast组件, 到github上面下载

Toast组件下载

解压后有两个文件jquery.toast.js和jquery.toast.css

使用的时候在html文件前面通过link标签和script标签引入即可
    <script src="./js/jquery.toast.js"></script> 
    <link rel="stylesheet" href="./css/jquery.toast.css">

复制模版

不想学习, 直接使用这个, 里面有使用说明

$.toast({
  heading: '输入你的提示标题',
  text: '输入你的提示内容',
  icon: 'success',  // 提示样式, 从后面四个样式选择('success','error','info','warning')
  position: 'bottom-right',// 提示位置:bottom可以换成top, right可以换成left, center
  showHideTransition: 'plain',  // 过渡动画三选一: 'fade', 'slide', 'plain'(这个好看)
});

这是Toast官网, 详细学习请参考官网, 我们只学习其中几个比较重要的参数就够用了

常用的参数有五个, 如果你觉得麻烦, 可以直接使用下面这个写好的代码, 后面有使用注释

无注释版本
$.toast({
  heading: '输入你的提示标题',
  text: '输入你的提示内容',
  icon: 'success'
  position: 'bottom-right',
  showHideTransition: 'plain',
});
有注释版本
$.toast({
  heading: '输入你的提示标题',
  text: '输入你的提示内容',
  icon: 'success'  // 提示样式, 从后面四个样式选择('success','error','info','warning')
  position: 'bottom-right',// 提示位置:bottom可以换成top, right可以换成left, center
  showHideTransition: 'plain',  // 过渡动画三选一: 'fade', 'slide', 'plain'(这个好看)
});

常见五大参数

参数	说明	示例值	必填性
`heading`	主标题文本	`'我是标题'`	可选
`text`	正文内容（支持动态变量）	`'这里是正文'`	必填
`icon`	图标类型或自定义图标	`'error'`	可选
`position`	显示位置（需插件支持）	`'top-right'`	可选
`showHideTransition`	显示/隐藏动画效果	`'`plain'	可选