bootstrapQ

  本文关键词：bootstrap

  更多相关文章： bootstrapQ

提示框（alert） 例子 普通提示框 自定义提示框 带回调提示框

使用// 仅提示文字 bootstrapQ.alert('这是一个提示'); // 自定义提示 bootstrapQ.alert(options); // 带回调的提示 bootstrapQ.alert(options,func);

共有两个参数：options和func。

options

类型：object，也可以直接传递string，

其中属性：

名称类型默认值描述

id
string
'bsmodal'
当需要多个modal时设置

titlestring'提示'
alert的标题

msgstring'msg'alert的提示信息

okbtnstring'确定'alert的确定按钮文字

closeboolean
true是否显示右上角的关闭按钮

bigboolean
false
alert的显示大小

backdrop

boolean

string

是否显示遮罩，以及点击遮罩后提示是否消失：

false：不显示

true：显示，点击后消失

'static'：显示，，点击后不消失

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

stylestring''自定义提示框的样式

func

类型：function，

描述：点击“确定”按钮后的回调函数，可以不传递。

确认框（confirm） 例子 普通确认框 自定义确认框 带回调确认框

使用// 普通确认框 bootstrapQ.confirm('这是一个确认框！'); // 自定义确认框 bootstrapQ.confirm(options); // 带回调确认框 bootstrapQ.confirm(options,ok,cancel);

共有三个参数：options和ok，cancel。

options

类型：object，也可以直接传递string，

其中属性：

名称类型默认值描述

id
string
'bsmodal'
当需要多个modal时设置

titlestring'提示'
confirm的标题

msgstring'msg'confirm的提示信息

okbtnstring'确定'confirm的确定按钮文字

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

closeboolean
true是否显示右上角的关闭按钮

bigboolean
false
confirm的显示大小

backdrop

boolean

string

是否显示遮罩，以及点击遮罩后提示是否消失：

false：不显示

true：显示，点击后消失

'static'：显示，点击后不消失

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

stylestring''自定义提示框的样式

ok

类型：function，

描述：点击“确定”按钮后的回调函数，可以不传递。

cancel

类型：function，

描述：点击“取消”按钮后的回调函数，可以不传递。

模态框（dialog） 例子 普通模态框 点击确定按钮的回调 页面加载完后的回调 多个modal的例子

使用// 普通模态框 qiao.bs.dialog({     url      : '/donate/tip',     title    : '捐助',     okbtn    : '多谢支持~' }); // 点击确定按钮的回调 qiao.bs.dialog({     url     : '/donate/tip',     title     : '捐助' },function(){     alert('点击了确定！');     return true; }); // 页面加载完的回调 qiao.bs.dialog({     url     : '/donate/tip',     title     : '捐助',     callback: function(){         $('#todonatea').text('这个是页面加载完后的回调修改的~').attr('href','javascript:void(0);');     } }); // 页面多个modal的例子，这里是dialog点确定后弹出一个confirm， // 注意弹出的confirm一定要自己设置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: '带回调确认框！'     },function(){         alert('点击了确定！');     },function(){         alert('点击了取消！');     }); }); // 查找模态框内的内容 // 为最外层的模态框赋予了id="bsmodal" // 所以，如果模态框中有表单，可以这样提交： var $form = $('#bsmodal').find('form'); ...

共有两个参数：options和func。

options

类型：object，

其中属性：

名称类型默认值描述

id
string
'bsmodal'
当需要多个modal时设置

urlstring''dialog默认是从url加载的页面，必须指定url

titlestring'title'
dialog的标题

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

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

msgstring'msg'dialog的提示信息

okbtnstring'确定'dialog的确定按钮文字

closeboolean
true是否显示右上角的关闭按钮

backdrop

boolean

string

是否显示遮罩，以及点击遮罩后提示是否消失：

false：不显示

true：显示，点击后消失

'static'：显示，点击后不消失

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

stylestring''自定义提示框的样式

mstylestring''自定义提示框的样式

callbackfunctionnulldialog中页面加载完毕后的回调函数

自定义宽度：mstyle:'width:300px;'

func

类型：function，

返回值：true，关闭窗口；false，不关闭窗口，

描述：点击“确定”按钮后的回调函数，可以不传递。

消息提示条（msg） 例子 普通消息提示条 自定义消息提示条

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

只有一个参数：options。

options

类型：object，也可以直接传递string

其中属性：

名称类型默认值描述

msgstring'msg'
msg的消息内容

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' });

只有一个参数：options。

options

类型：object，也可以直接传递string

其中属性：

名称类型默认值描述

titlestring''
tooltip的提示内容

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

triggerstring'hover'
tooltip的触发方式，包括：click,hover,focus,manua

烤饼（popover） 例子 烤饼

使用// 普通烤饼 $('#popover1').bspop({     title : '烤饼',     content : '烤饼内容，支持html内容' });

只有一个参数：options。

contentstring'content'popover的内容，支持html格式