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

近期项目接触到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

你可能感兴趣的:(bootstrap,插件,前端框架,提示框)