JQuery信息提示框插件jquery.toast.js

在线预览地址

下载地址

浏览器兼容性
IE 9
Mozilla Firefox
Google Chrome
Oper
Safari

1，信息提示框样式如下图所示：

2，使用方法
在页面中引入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

})    

自定义消息提示框的样式：

$.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。

3，在线预览页面有很多样式，底部自已自己配置自己需要的提示框。

配置好的代码如下图所示：