使用

// 仅提示文字
bootstrapQ.alert('这是一个提示');

// 自定义提示
bootstrapQ.alert(options);

// 带回调的提示
bootstrapQ.alert(options,func);

参数

共有两个参数：options和func。

options

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

其中属性：

func

类型：function，

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

使用

// 普通确认框
bootstrapQ.confirm('这是一个确认框！');

// 自定义确认框
bootstrapQ.confirm(options);

// 带回调确认框
bootstrapQ.confirm(options,ok,cancel);

参数

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

options

类型：object，也可以直接传递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，

其中属性：

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

func

类型：function，

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

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

使用

// 普通消息提示条
bootstrapQ.msg('普通消息提示条！');

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

参数

只有一个参数：options。

options

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

其中属性：

使用

// 普通提示
$('#tooltip1').bstip('普通提示');

// 自定义提示
$('#tooltip2').bstip({
    title	: '在右边的自定义提示',
    html	: true,
    placement	: 'right',
    trigger	: 'hover'
});

参数

只有一个参数：options。

options

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

其中属性：

使用

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

参数

只有一个参数：options。

options

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

其中属性：

使用

// 首先需要一个装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

其中属性：

数据结构

要使用该组件，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/，

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

其中属性：

说明

介绍

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/