前端Toast提示快速入门
White graces：个人主页
🙉专栏推荐:Java入门知识🙉
🐹今日诗词:十年一觉扬州梦，赢得青楼薄幸名🐹
⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏
⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏
简单介绍一下Toast:
Toast是一种轻量级不打断用户当前操作流程, 为用户提供操作后的实时反馈（如提交成功、网络错误等)
组件下载
使用之前需要下载toast组件, 到github上面下载
Toast组件下载
解压后有两个文件jquery.toast.js和jquery.toast.css
使用的时候在html文件前面通过link标签和script标签引入即可
复制模版
不想学习, 直接使用这个, 里面有使用说明
$.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' | 可选 |
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官网
美图分享
✨🎆谢谢你的阅读和耐心！祝愿你在编程的道路上取得更多的成功与喜悦！"🎆✨🎄
⭐️点赞收藏加关注，学习知识不迷路⭐️
🎉✔️💪🎉✔️💪🎉✔️💪🎉✔️💪🎉
👍😏⛳️点赞☀️收藏⭐️关注😏👍
👍😏⛳️点赞☀️收藏⭐️关注😏👍
👍😏⛳️点赞☀️收藏⭐️关注😏👍
🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️🙆♂️
