近期项目接触到bootstrap,原谅我孤陋寡闻从来都没有听过bootstrap前端框架(o(╯□╰)o 前前段时间接触到的EasyUI也没有听过),哎,废话不多说了,把bootstrap的两个提示插件做一个简要的介绍
1. 插件 bootstrap-growl ,插件github地址:https://github.com/ifightcrime/bootstrap-growl
以下是说明以及效果图:
bootstrap-growl这个插件比较简单,源码也就只有一点点(我就不贴源码了。反正贴了也不会看),介绍一下用法
$.bootstrapGrowl("My message"); $.bootstrapGrowl("another message, yay!", { ele: 'body', // which element to append to 绑定到某个元素 type: 'info', // (null, 'info', 'danger', 'success') 提示的类型 offset: {from: 'top', amount: 20}, // 'top', or 'bottom' 相对顶部或者底部的距离 align: 'right', // ('left', 'right', or 'center') 位置 左右居中 width: 250, // (integer, or 'auto') 宽度 delay: 4000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut! 自动消失时间设置 allow_dismiss: true, // If true then will display a cross to close the popup. 是否出现小叉叉点击就取消提示框 stackup_spacing: 10 // spacing between consecutively stacked growls. 这是嘛不太懂 说啥间距嘛的 });
效果图:
2.插件 bootstrap-notify.min.js 插件github地址 https://github.com/mouse0270/bootstrap-notify
因为这个插件内容很多,你能想到的基本都有,所以只做一些简单说明(我也只用到这一点点)
function errorMesg(mess){ $.notify({ title: '<strong>Prompt!</strong>', message: mess },{ type: 'danger' }); }
查看 Demon http://bootstrap-notify.remabledesigns.com/
CSDN下载链接: bootstrap-notify http://download.csdn.net/detail/u013361445/9119241
bootstrap-growl http://download.csdn.net/detail/u013361445/9119247