对话框/Tips
可自由配置jQuery消息提示框插
PetitQ
jquery.toast.js 是一款可自由配置的 jQuery 消息提示框插件。该消息提示框可以自定义背景和前景色，提示框的位置，提示框的显示时间，提示框的动画效果等。
使用方法：
在页面中引入 jquery.toast.css 文件，jquery 和 jquery.toast.js 文件。
也想出现在这里？联系我们吧
<link type="text/css" rel="stylesheet" href="css/jquery.toast.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.toast.js"></script>
初始化插件：
简单文本的消息提示框：
// Non sticky version$.toast("Lorem ipsum dolor sit amet...")
// Sticky version$.toast({
text : "Lorem ipsum dolor sit amet...",
hideAfter : false
})
使用 HTML 标签的消息提示框：
// Non sticky$.toast("Let's test some HTML stuff... <a href='#'>github</a>")
// sticky$.toast({
text : "<strong>Remember!</strong> You can <span style='font-weight: bold; color:red;' class='horribly-styled'>always</span> introduce your own × HTML and <span style='font-size: 18px;'>CSS</span> in the toast.",
hideAfter : false
})
// Non sticky version$.toast(["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"])
// Sticky version$.toast({
text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"],
hideAfter : false
})
配置参数：
$.toast({
text : "",
showHideTransition : 'slide'
})
自定义消息提示框的样式：
$.toast({
text : "......",
showHideTransition : 'slide',
bgColor : 'blue',
textColor : '#eee',
allowToastClose : false,
hideAfter : 5000,
stack : 5,
textAlign : 'left',
position : 'bottom-left'
})
text：消息提示框的内容
showHideTransition：消息提示框的动画效果。可取值：plain，fade，slide
bgColor：背景颜色
textColor：文字颜色
allowToastClose：是否显示关闭按钮
hideAfter：设置为 false 则消息提示框不自动关闭。设置为一个数值则在指定的毫秒之后自动关闭消息提示框
stack：消息栈
textAlign：文本对齐：left, right, center
position：消息提示框的位置：bottom-left 、 bottom-right 、 bottom-center 、 top-left 、 top-right 、 top-center 、 mid-center。
重置消息提示框:
var myToast = $.toast('Some toast that needs to be removed.');
myToast.reset(); // remove the toast "Some toast that needs to be removed"
可以通过下面的方法来重置所有的消息提示框：
$.toast().reset('all');
更新消息提示框:
你可以通过下面的方法来更新页面上的消息提示框：
var myToast = $.toast({
text : 'Some toast that needs to show the success message after the ajax call.',
hideAfter : false,
bgColor : '#E01A31'
});
window.setTimeout(function(){
myToast.update({
text : '<strong>Updated after a few seconds</strong>',
bgColor : '#23B65D'
});
}, 5000);
jquery.toast.js 消息提示框插件的 github 地址为：https://github.com/kamranahmedse/jquery-toast-plugin
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
