JQuery信息提示框插件jquery.toast.js
来源:互联网 发布:c语言文件打开方式 编辑:程序博客网 时间:2024/04/29 17:19
在线预览地址
下载地址
浏览器兼容性
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,在线预览页面有很多样式,底部自已自己配置自己需要的提示框。
配置好的代码如下图所示:
阅读全文
0 0
- JQuery信息提示框插件jquery.toast.js
- Jquery信息提示插件
- React Js 精简 Toast 提示框 不使用jquery
- JQuery提示框tips插件:jquery.contip.js
- Jquery的提示插件 jquery.poshytip.js
- jquery提示插件 jquery.poshytip.js
- JQuery 提示框,提示信息
- qTip2 精致的jQuery提示信息插件
- qTip2 精致的jQuery提示信息插件
- 基于jQuery信息提示弹出层插件
- qTip2 精致的jQuery提示信息插件
- 流行的jQuery信息提示插件(jQuery Tooltip Plugin)
- jQuery信息提示工具----poshytip.js
- 信息提示框Toast
- 信息提示框Toast
- textarea 标签中placeholder提示信息手动换行(jQuery水印插件watermark.js )
- 【前端插件】基于JQuery / Zepto的移动端弹窗提示插件,模仿原生Toast
- jquery文本框提示信息
- (OK) Performance Enhancement of Multipath TCP in Mobile Ad Hoc Networks
- Linux Vi 删除全部内容,删除某行到结尾,删除某段内容 的方法
- MongoDB权威指南--阅读笔记(二)
- XC7K325T与TMS320C6678的FMC子卡加4路光纤处理卡
- CSS3 border-radius 属性学习
- JQuery信息提示框插件jquery.toast.js
- CSS的link和@import方式的区别
- java反射:数据类型及返回值对应的类类型以及Class类的基本API
- Python读取串口
- 如何遍历删除一个list中的特定数据
- postgreSQL与MySQL的比较
- Linux中解除端口占用
- 数据结构之栈(一)--顺序栈
- git笔记