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

在线预览地址

下载地址

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

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

2，使用方法
在页面中引入jquery.toast.css文件，jquery和jquery.toast.js文件。

简单文本的消息提示框：

// 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，在线预览页面有很多样式，底部自已自己配置自己需要的提示框。

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