天天看點

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. 這是嘛不太懂 說啥間距嘛的 
});
           

效果圖:

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

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