前端Toast提示快速入门

White graces：个人主页

🙉专栏推荐: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, centershowHideTransition: '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, centershowHideTransition: 'plain',  // 过渡动画三选一: 'fade', 'slide', 'plain'(这个好看)
});

常见五大参数

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

icon(提示样式)

icon提示样式常用的有四种: 'success', 'error', 'warning', 'info'

position(提示位置)

一般使用组合定位: 例如 'bottom-right', (右下角)

top-left (左上角)

top-center (上中)

top-right (右上角)

bottom-left (左下角)

bottom-center (下中)

bottom-right (右下角)

showHideTransition(过渡动画)

过渡效果有三种: 

• 'fade'（淡入淡出过渡，默认值）
• 'slide'（幻灯片上下切换过渡）
• 'plain'（角落过渡)

更多效果请到官网: Toast官网

美图分享

✨🎆谢谢你的阅读和耐心！祝愿你在编程的道路上取得更多的成功与喜悦！"🎆✨🎄

⭐️点赞收藏加关注，学习知识不迷路⭐️

🎉✔️💪🎉✔️💪🎉✔️💪🎉✔️💪🎉

👍😏⛳️点赞☀️收藏⭐️关注😏👍

👍😏⛳️点赞☀️收藏⭐️关注😏👍

👍😏⛳️点赞☀️收藏⭐️关注😏👍

🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️🙆‍♂️