使用

// 仅提示文字
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

'static'

是否显示遮罩,以及点击遮罩后提示是否消失:

false:不显示

true:显示,点击后消失

'static':显示,点击后不消失

keyboardboolean
true
按下esc按键后是否消失
stylestring''自定义提示框的样式

func

类型:function,

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

使用

// 普通确认框
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

'static'

是否显示遮罩,以及点击遮罩后提示是否消失:

false:不显示

true:显示,点击后消失

'static':显示,点击后不消失

keyboardboolean
true
按下esc按键后是否消失
stylestring''自定义提示框的样式


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时设置
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

'static'

是否显示遮罩,以及点击遮罩后提示是否消失:

false:不显示

true:显示,点击后消失

'static':显示,点击后不消失

keyboardboolean
true
按下esc按键后是否消失
stylestring''自定义提示框的样式
mstylestring''自定义提示框的样式
callbackfunctionnulldialog中页面加载完毕后的回调函数

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


func

类型:function,

返回值:true,关闭窗口;false,不关闭窗口,

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

使用

// 普通消息提示条
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。


options

类型:object,也可以直接传递string

其中属性:

名称类型默认值描述
titlestring''
popover的标题
contentstring'content'popover的内容,支持html格式
htmlbooleantruepopover是否支持html格式
placementstring'bottom'
popover的显示位置,包括:top,bottom,left,right
triggerstring'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

其中属性:


名称类型默认值描述
urlstring'/ucenter/menu'
tree加载的基础地址
heightstring'600px'tree容器的高度,也可以使用'auto',将填充父容器
openbooleantruetree默认是打开还是闭合
editbooleanfalsetree是否显示编辑按钮
checkboxbooleanfalsetree是否显示复选框
showurlbooleantrue
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();
    }
    
}


网站引导(bstro)


例子

开始引导

说明

介绍

这个并不是bootstrap的自带的组件,而是一个基于bootstrap的插件,

是bootstrap网站引导类效果很好的一个插件。

官网

官网:http://clu3.github.io/bootstro.js/

why

这里只是对其的使用做了一下封装,

本来使用的话需要:

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,也可以不传递

其中属性:

名称类型默认值描述
pbtnstring'上一步'
bstro中转到上一步的按钮文字
obtnstring'完成'bstro中完成的按钮文字
stopfunctionnullbstro停止的时候回调的函数,点击遮罩或者按下esc则停止
exitfunctionnullbstro完成时的回调函数

日期插件(bsdate)


例子

说明

介绍

bootstrap日期插件中功能很强大的一款插件,

注意只是日期插件,日期时间插件以后再说。

官网

官网:https://github.com/eternicode/bootstrap-datepicker

官网内如有api和在线实例。

why

相信所有网站日期插件是必不可少的,而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/