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

在线预览地址

下载地址

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


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

相关文章
相关标签/搜索