近期項目接觸到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