本文關(guān)鍵詞：bootstrap

  更多相關(guān)文章： bootstrapQ

提示框（alert） 例子 普通提示框 自定義提示框 帶回調(diào)提示框

使用// 僅提示文字 bootstrapQ.alert('這是一個提示'); // 自定義提示 bootstrapQ.alert(options); // 帶回調(diào)的提示 bootstrapQ.alert(options,func);

共有兩個參數(shù)：options和func。

options

類型：object，也可以直接傳遞string，

其中屬性：

名稱類型默認(rèn)值描述

id
string
'bsmodal'
當(dāng)需要多個modal時設(shè)置

titlestring'提示'
alert的標(biāo)題

msgstring'msg'alert的提示信息

okbtnstring'確定'alert的確定按鈕文字

closeboolean
true是否顯示右上角的關(guān)閉按鈕

bigboolean
false
alert的顯示大小

backdrop

boolean

string

是否顯示遮罩，以及點擊遮罩后提示是否消失：

false：不顯示

true：顯示，點擊后消失

'static'：顯示，，點擊后不消失

keyboardboolean
true
按下esc按鍵后是否消失

stylestring''自定義提示框的樣式

func

類型：function，

描述：點擊“確定”按鈕后的回調(diào)函數(shù)，可以不傳遞。

確認(rèn)框（confirm） 例子 普通確認(rèn)框 自定義確認(rèn)框 帶回調(diào)確認(rèn)框

使用// 普通確認(rèn)框 bootstrapQ.confirm('這是一個確認(rèn)框！'); // 自定義確認(rèn)框 bootstrapQ.confirm(options); // 帶回調(diào)確認(rèn)框 bootstrapQ.confirm(options,ok,cancel);

共有三個參數(shù)：options和ok，cancel。

options

類型：object，也可以直接傳遞string，

其中屬性：

名稱類型默認(rèn)值描述

id
string
'bsmodal'
當(dāng)需要多個modal時設(shè)置

titlestring'提示'
confirm的標(biāo)題

msgstring'msg'confirm的提示信息

okbtnstring'確定'confirm的確定按鈕文字

qubtnstring'取消'confirm的取消按鈕文字

closeboolean
true是否顯示右上角的關(guān)閉按鈕

bigboolean
false
confirm的顯示大小

backdrop

boolean

string

是否顯示遮罩，以及點擊遮罩后提示是否消失：

false：不顯示

true：顯示，點擊后消失

'static'：顯示，點擊后不消失

keyboardboolean
true
按下esc按鍵后是否消失

stylestring''自定義提示框的樣式

ok

類型：function，

描述：點擊“確定”按鈕后的回調(diào)函數(shù)，可以不傳遞。

cancel

類型：function，

描述：點擊“取消”按鈕后的回調(diào)函數(shù)，可以不傳遞。

模態(tài)框（dialog） 例子 普通模態(tài)框 點擊確定按鈕的回調(diào) 頁面加載完后的回調(diào) 多個modal的例子

使用// 普通模態(tài)框 qiao.bs.dialog({     url      : '/donate/tip',     title    : '捐助',     okbtn    : '多謝支持~' }); // 點擊確定按鈕的回調(diào) qiao.bs.dialog({     url     : '/donate/tip',     title     : '捐助' },function(){     alert('點擊了確定！');     return true; }); // 頁面加載完的回調(diào) qiao.bs.dialog({     url     : '/donate/tip',     title     : '捐助',     callback: function(){         $('#todonatea').text('這個是頁面加載完后的回調(diào)修改的~').attr('href','javascript:void(0);');     } }); // 頁面多個modal的例子，這里是dialog點確定后彈出一個confirm， // 注意彈出的confirm一定要自己設(shè)置id，詳見下面代碼 qiao.bs.dialog({     url     : '/donate/tip',     title     : '捐助',     callback: function(){         $('#todonatea').text('點擊確定按鈕會再彈出一個modal（confirm）框~').attr('href','javascript:void(0);');     } }, function(){     qiao.bs.confirm({         id: 'bsconfirm',         msg: '帶回調(diào)確認(rèn)框！'     },function(){         alert('點擊了確定！');     },function(){         alert('點擊了取消！');     }); }); // 查找模態(tài)框內(nèi)的內(nèi)容 // 為最外層的模態(tài)框賦予了id="bsmodal" // 所以，如果模態(tài)框中有表單，可以這樣提交： var $form = $('#bsmodal').find('form'); ...

共有兩個參數(shù)：options和func。

options

類型：object，

其中屬性：

名稱類型默認(rèn)值描述

id
string
'bsmodal'
當(dāng)需要多個modal時設(shè)置

urlstring''dialog默認(rèn)是從url加載的頁面，必須指定url

titlestring'title'
dialog的標(biāo)題

head
boolean
true
dialog的head部分，是否顯示

foot
boolean
true
dialog的foot部分，是否顯示

msgstring'msg'dialog的提示信息

okbtnstring'確定'dialog的確定按鈕文字

closeboolean
true是否顯示右上角的關(guān)閉按鈕

backdrop

boolean

string

是否顯示遮罩，以及點擊遮罩后提示是否消失：

false：不顯示

true：顯示，點擊后消失

'static'：顯示，點擊后不消失

keyboardboolean
true
按下esc按鍵后是否消失

stylestring''自定義提示框的樣式

mstylestring''自定義提示框的樣式

callbackfunctionnulldialog中頁面加載完畢后的回調(diào)函數(shù)

自定義寬度：mstyle:'width:300px;'

func

類型：function，

返回值：true，關(guān)閉窗口；false，不關(guān)閉窗口，

描述：點擊“確定”按鈕后的回調(diào)函數(shù)，可以不傳遞。

消息提示條（msg） 例子 普通消息提示條 自定義消息提示條

使用// 普通消息提示條 bootstrapQ.msg('普通消息提示條！'); // 自定義消息提示條 bootstrapQ.msg({     msg  : '自定義消息提示條，警告，3秒消失',     type : 'danger',     time : 3000 });

只有一個參數(shù)：options。

options

類型：object，也可以直接傳遞string

其中屬性：

名稱類型默認(rèn)值描述

msgstring'msg'
msg的消息內(nèi)容

typestring'info'msg的消息類型，success，info，warning，danger四種類型

timenumber2000msg的顯示時長，單位為毫秒

positionstring'top'msg的顯示位置，只有top，bottom兩個值

提示（tooltip） 例子 普通提示 自定義提示

使用// 普通提示 $('#tooltip1').bstip('普通提示'); // 自定義提示 $('#tooltip2').bstip({     title : '在右邊的自定義提示',     html : true,     placement : 'right',     trigger : 'hover' });

只有一個參數(shù)：options。

options

類型：object，也可以直接傳遞string

其中屬性：

名稱類型默認(rèn)值描述

titlestring''
tooltip的提示內(nèi)容

placementstring'bottom'
tooltip的顯示位置，包括：top,bottom,left,right

triggerstring'hover'
tooltip的觸發(fā)方式，包括：click,hover,focus,manua

烤餅（popover） 例子 烤餅

使用// 普通烤餅 $('#popover1').bspop({     title : '烤餅',     content : '烤餅內(nèi)容，支持html內(nèi)容' });

只有一個參數(shù)：options。

contentstring'content'popover的內(nèi)容，支持html格式