bootstrap 提示框插件 bootstrap-growl 和bootstrap-notify用法简介

来源：互联网发布：vmware fusion 8 mac 编辑：程序博客网时间：2024/04/29 21:35

近期项目接触到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'                });            }

其实还有很多用法，比如说Icon-提示框带图片，url-链接路径，animate-动画等等，更多请

查看 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

2 0