jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
安装
可以通过bower或npm来安装该消息提示框插件。
bower install jquery-toast-plugin npm install jquery-toast-plugin
使用方法
在页面中引入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 : "Let's test some HTML stuff... <a href='#'>github</a>", showHideTransition : 'slide' // It can be plain, fade or 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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!