// 仅提示文字 bootstrapQ.alert('这是一个提示'); // 自定义提示 bootstrapQ.alert(options); // 带回调的提示 bootstrapQ.alert(options,func);
共有两个参数:options和func。
options
类型:object,也可以直接传递string,
其中属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
id | string | 'bsmodal' | 当需要多个modal时设置 |
title | string | '提示' | alert的标题 |
msg | string | 'msg' | alert的提示信息 |
okbtn | string | '确定' | alert的确定按钮文字 |
close | boolean | true | 是否显示右上角的关闭按钮 |
big | boolean | false | alert的显示大小 |
backdrop | boolean string | 'static' | 是否显示遮罩,以及点击遮罩后提示是否消失: false:不显示 true:显示,点击后消失 'static':显示,点击后不消失 |
keyboard | boolean | true | 按下esc按键后是否消失 |
style | string | '' | 自定义提示框的样式 |
func
类型:function,
描述:点击“确定”按钮后的回调函数,可以不传递。
// 普通确认框 bootstrapQ.confirm('这是一个确认框!'); // 自定义确认框 bootstrapQ.confirm(options); // 带回调确认框 bootstrapQ.confirm(options,ok,cancel);
共有三个参数:options和ok,cancel。
options
类型:object,也可以直接传递string,
其中属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
id | string | 'bsmodal' | 当需要多个modal时设置 |
title | string | '提示' | confirm的标题 |
msg | string | 'msg' | confirm的提示信息 |
okbtn | string | '确定' | confirm的确定按钮文字 |
qubtn | string | '取消' | confirm的取消按钮文字 |
close | boolean | true | 是否显示右上角的关闭按钮 |
big | boolean | false | confirm的显示大小 |
backdrop | boolean string | 'static' | 是否显示遮罩,以及点击遮罩后提示是否消失: false:不显示 true:显示,点击后消失 'static':显示,点击后不消失 |
keyboard | boolean | true | 按下esc按键后是否消失 |
style | string | '' | 自定义提示框的样式 |
ok
类型:function,
描述:点击“确定”按钮后的回调函数,可以不传递。
cancel
类型:function,
描述:点击“取消”按钮后的回调函数,可以不传递。
// 普通模态框 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时设置 |
url | string | '' | dialog默认是从url加载的页面,必须指定url |
title | string | 'title' | dialog的标题 |
head | boolean | true | dialog的head部分,是否显示 |
foot | boolean | true | dialog的foot部分,是否显示 |
msg | string | 'msg' | dialog的提示信息 |
okbtn | string | '确定' | dialog的确定按钮文字 |
close | boolean | true | 是否显示右上角的关闭按钮 |
backdrop | boolean string | 'static' | 是否显示遮罩,以及点击遮罩后提示是否消失: false:不显示 true:显示,点击后消失 'static':显示,点击后不消失 |
keyboard | boolean | true | 按下esc按键后是否消失 |
style | string | '' | 自定义提示框的样式 |
mstyle | string | '' | 自定义提示框的样式 |
callback | function | null | dialog中页面加载完毕后的回调函数 |
自定义宽度:mstyle:'width:300px;'
func
类型:function,
返回值:true,关闭窗口;false,不关闭窗口,
描述:点击“确定”按钮后的回调函数,可以不传递。
// 普通消息提示条 bootstrapQ.msg('普通消息提示条!'); // 自定义消息提示条 bootstrapQ.msg({ msg : '自定义消息提示条,警告,3秒消失', type : 'danger', time : 3000 });
只有一个参数:options。
options
类型:object,也可以直接传递string
其中属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
msg | string | 'msg' | msg的消息内容 |
type | string | 'info' | msg的消息类型,success,info,warning,danger四种类型 |
time | number | 2000 | msg的显示时长,单位为毫秒 |
position | string | 'top' | msg的显示位置,只有top,bottom两个值 |
// 普通提示 $('#tooltip1').bstip('普通提示'); // 自定义提示 $('#tooltip2').bstip({ title : '在右边的自定义提示', html : true, placement : 'right', trigger : 'hover' });
只有一个参数:options。
options
类型:object,也可以直接传递string
其中属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
title | string | '' | tooltip的提示内容 |
placement | string | 'bottom' | tooltip的显示位置,包括:top,bottom,left,right |
trigger | string | 'hover' | tooltip的触发方式,包括:click,hover,focus,manua |
// 普通烤饼 $('#popover1').bspop({ title : '烤饼', content : '烤饼内容,支持html内容' });
只有一个参数:options。
options
类型:object,也可以直接传递string
其中属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
title | string | '' | popover的标题 |
content | string | 'content' | popover的内容,支持html格式 |
html | boolean | true | popover是否支持html格式 |
placement | string | 'bottom' | popover的显示位置,包括:top,bottom,left,right |
trigger | string | 'hover' | popover的触发方式,包括:click,hover,focus,manua |
// 首先需要一个装tree的容器,例如: <p id="treepanel"></p> // 然后就可以通过一下方法加载tree了。 // 普通tree $('#treepanel').bstree({url:'/other/menu'}); // 带复选框tree $('#treepanel').bstree({url:'/other/menu',checkbox:true}); // 可编辑tree $('#treepanel').bstree({url:'/other/menu',edit:true});
只有一个参数:options。
options
类型:object,也可以直接传递string
其中属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
url | string | '/ucenter/menu' | tree加载的基础地址 |
height | string | '600px' | tree容器的高度,也可以使用'auto',将填充父容器 |
open | boolean | true | tree默认是打开还是闭合 |
edit | boolean | false | tree是否显示编辑按钮 |
checkbox | boolean | false | tree是否显示复选框 |
showurl | boolean | true | tree是否显示每一项的url |
要使用该组件,server端需要以下数据结构支持,以java为例,传到前端保持json格式即可:
public class QTree { private int id; private String url;// tree组件一般用于菜单,url为菜单对应的地址 private String text;// 显示文字 private boolean checked = false;// 是否选中 private List<QTree> children;// 子tree }
json返回格式需要以下数据结构支持:
public class QJson{ private boolean success = true; private String msg;// 消息 private String type;// 类型 private Object object;// 对象 }
加载tree的是将tree设置为object,其余编辑tree的方法将消息设置到msg中即可。
为方便使用,对一些地址做了默认设置,有需要可以自行修改源代码:
基础地址:/ucenter/menu
说明:所有地址的基础地址
加载地址:/ucenter/menu/tree
说明:server端查找到tree结构,以json格式返回
添加子菜单地址:/ucenter/menu/add/id
说明:id为父菜单id
保存子菜单地址:/ucenter/menu/save
说明:填写子菜单相关信息后保存
删除菜单地址:/ucenter/menu/del/id
说明:id为要删除的tree一级的id,同时会删除该级下所有子tree
修改菜单地址:/ucenter/menu/savep?id=id
说明:id为要修改的tree的id
保存菜单修改地址:/ucenter/menu/save
说明:和保存子菜单地址相同,需要自己做区分
很多人没有看懂上面的内容,
1.初始化的时候只需要一个容器,例如div#id,
2.初始化的时候可以传入url,height,open,edit,checkbox,showurl属性,
其中只有url是必须的,
其他都是可选的,
height代表高度,
open代表tree展开,
edit代表是否可编辑,
checkbox代表是否显示checkbox,
showurl代表是否显示这个tree节点的url属性。
3.url
url是一个基础地址,例如/other/menu
4.tree的展示
js代码会默认去请求url+/tree这个地址,也就是/other/menu/tree,
也就是说你请求/other/menu/tree可以返回正确的tree结构,
请参考下面的后台代码示例,
也就是说当你将url给定/other/menu后,
你必须有一个后台是/other/menu/tree,
并且这个后台可以返回正确的tree的json格式。
5.tree添加子菜单界面
同样,js代码会拼装一个添加子菜单的地址,如果你给的url是/other/menu,
那么拼装出来的地址就是/other/menu/add/id,其中id是父菜单的id,这个会自动获取,
也就是说你后台必须有一个/other/menu/add/id的地址可以接收请求,
并返回一个添加界面,界面中指定你想要添加的内容,
例如:
<#include "/com/uikoo9/util/jfinal/view/common/inc.html"/> <form class="form-horizontal" role="form"> <input type="hidden" name="row.ucenter_menu_parent_id" value="${(ucenter_menu_parent_id)!}"/> <@bsinput title='菜单名称' name='row.ucenter_menu_title' value='${(row.ucenter_menu_title)!}'/> <@bsinput title='菜单地址' name='row.ucenter_menu_url' value='${(row.ucenter_menu_url)!}'/> <@bsinput title='菜单序号' name='row.ucenter_menu_sn' value='${(row.ucenter_menu_sn)!}'/> <@bsinput title='后台菜单' input=false> <@bsradios name='row.ucenter_menu_type' ck='${(row.ucenter_menu_type)!"000101"}' list=yesnos/> </@bsinput> </form>
6.tree保存和删除
同样会拼装出保存和删除的地址,/other/menu/save,/other/menu/del/id
7.tree修改
同样会拼装出修改的地址,返回一个html页面,地址/other/menu/savep?id=id,id为要修改的tree节点id
package com.uikoo9.manage.other.controller; import java.util.List; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import com.uikoo9.manage.other.model.OtherMenuModel; import com.uikoo9.util.core.annotation.QControllerUrl; import com.uikoo9.util.core.data.QArrayUtil; import com.uikoo9.util.core.data.QStringUtil; import com.uikoo9.util.jfinal.QController; import com.uikoo9.util.jfinal.ucenter.model.UcenterUserModel; import com.uikoo9.util.plugin.contants.QContants; import com.uikoo9.util.plugin.contants.QContantsUtil; import com.uikoo9.util.plugin.json.QJsonUtil; import com.uikoo9.util.plugin.tree.QTree; /** * OtherMenuController * @author qiaowenbin */ @QControllerUrl("/other/menu") public class OtherMenuController extends QController{ private static final Logger logger = LoggerFactory.getLogger(OtherMenuController.class); /** * 跳转到菜单管理页面 */ public void index(){ setAttr("tree", new QTree(0, "/", "根菜单", "t_other_menu", null)); render("/WEB-INF/view/manage/other/other-menu-index.html"); } /** * 生成树 */ public void tree(){ renderJson(QJsonUtil.suc(new QTree(0, "/", "根菜单", "t_other_menu", null))); } /** * 跳转到添加子菜单页面 */ public void add(){ setAttr("yesnos", QContantsUtil.list(QContants.YESNO)); setAttr("ucenter_menu_parent_id", getParaToInt(0)); render("/WEB-INF/view/manage/other/other-menu-add.html"); } /** * 跳转到保存修改页 */ public void savep(){ setAttr("yesnos", QContantsUtil.list(QContants.YESNO)); setAttr("row", getRow(OtherMenuModel.class)); render("/WEB-INF/view/manage/other/other-menu-edit.html"); } /** * 保存或修改 */ public void save(){ String validate = validate(); if(validate == null){ UcenterUserModel user = getUser(); if(user == null){ user = new UcenterUserModel(); user.set("id", 0); user.set("ucenter_user_name", "menudemo"); setAttr("user", user); } renderJson(save(OtherMenuModel.class)); }else{ renderJson(QJsonUtil.error(validate)); } } /** * 删除菜单,包括子菜单 */ public void del(){ try { delChildren(getParaToInt()); renderJson(QJsonUtil.suc("删除成功!")); } catch (Exception e) { logger.error(QStringUtil.fromException(e)); renderJson(QJsonUtil.error("删除失败!")); } } private void delChildren(Integer id){ OtherMenuModel menu = OtherMenuModel.dao.findById(id); List<OtherMenuModel> menus = menu.submenus(); if(QArrayUtil.notEmpty(menus)){ for(OtherMenuModel sub : menus){ delChildren(sub.getInt("id")); } } menu.delete(); } }
这个并不是bootstrap的自带的组件,而是一个基于bootstrap的插件,
是bootstrap网站引导类效果很好的一个插件。
官网:http://clu3.github.io/bootstro.js/,
这里只是对其的使用做了一下封装,
本来使用的话需要:
1.在页面添加响应属性;
2.用js激活
现在只需要一个方法即可。
使用之前需要引入如下代码:
<link rel="stylesheet" href="http://uikoo9.qiniudn.com/@/js/bootstro/bootstro.min.css"> <script type="text/javascript" src="http://uikoo9.qiniudn.com/@/js/bootstro/bootstro.min.js"></script>
// 一个方法搞定 bootstrapQ.bstro([ ['#md5input','<h3 style="margin-top:10px;">使用关键字检索问题或知识点~</h3>'], ['.breadcrumb','<h3 style="margin-top:10px;">也可以分类检索问题知识点哟~</h3>'], ['#questionsDiv',{content:'<h3 style="margin-top:10px;">这里是问题知识点列表~</h3>',place:'right'}], ['#addQuestionLi','<h3 style="margin-top:10px;">提问,或添加知识点在这里~</h3>'], ['#userRankLi','<h3 style="margin-top:10px;">用户最佳回答排行榜~</h3>'], ['#userLoginLi','<h3 style="margin-top:10px;">从这里登录哦~</h3>'] ],{ obtn : '我已了解,下次不再提示!', exit : function(){ $.cookie('bootstro','ok',{expires:30, path:'/'}); } });
有两个参数:bss,options。
bss
类型:[[],[],[]...]
说明:
需要引导的元素和引导显示的提示组成的数组。
数组中每个元素也是数组,
子数组中需要两个string,
第一个是需要引导的元素,可以使用id或者class等,
第二个是这个引导的元素对应的提示的问题,支持html格式。
options
类型:object,也可以不传递
其中属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
pbtn | string | '上一步' | bstro中转到上一步的按钮文字 |
obtn | string | '完成' | bstro中完成的按钮文字 |
stop | function | null | bstro停止的时候回调的函数,点击遮罩或者按下esc则停止 |
exit | function | null | bstro完成时的回调函数 |
bootstrap日期插件中功能很强大的一款插件,
注意只是日期插件,日期时间插件以后再说。
官网:https://github.com/eternicode/bootstrap-datepicker,
官网内如有api和在线实例。
相信所有网站日期插件是必不可少的,而bootstrap也有很多日期插件,
选了一款最为强大的插件,并将中文js直接压缩到主js内,
稍加封装,希望有所帮助。
使用之前需要引入如下代码:
<link rel="stylesheet" href="http://uikoo9.qiniudn.com/@/js/datepicker/bootstrap-datepicker3.min.css"> <script type="text/javascript" src="http://uikoo9.qiniudn.com/@/js/datepicker/bootstrap-datepicker-min.js"></script>
// 一个方法搞定 bootstrapQ.bsdate('.qdate');
有两个参数:selector,options。
selector
类型:string
说明:
普通的选择器
options
类型:object,也可以不传递
其中属性:
详见官方文档:http://bootstrap-datepicker.readthedocs.org/en/latest/