强大的 jQuery Toast 插件
以下是一个使用 jQuery Toast 插件的示例代码。假设我们已经在页面中包含了 jQuery 和 jQuery Toast 插件的相关文件。
HTML 部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Toast 示例</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 jQuery Toast 插件 -->
<script src="path_to_your_jquery.toast.plugin.js"></script>
</head>
<body>
<button id="showToast">显示 Toast</button>
<script>
// 绑定点击事件
$('#showToast').click(function() {
// 显示 Toast
$.toast({
text: '操作成功！', // 显示的文本
heading: '提示', // 标题
icon: 'success', // 图标
showHideTransition: 'slide', // 过渡效果
allowToastClose: true, // 允许关闭
hideAfter: 5000, // 5 秒后隐藏
position: 'top-right', // 位置
bgColor: '#7EC857', // 背景颜色
textColor: 'white', // 文本颜色
loaderBg: '#000' // 加载器背景颜色
});
});
</script>
</body>
</html>在这个例子中，我们定义了一个按钮，当按钮被点击时，会触发一个事件显示一个 Toast 通知。通过调用 $.toast() 方法并传递一个配置对象，我们可以定制 Toast 的内容、样式和行为。这个插件提供了多种参数选项，可以根据需要进行设置。
评论已关闭