【前言】

使用bootstrap有两年时间了，积累了一些经验，做下分享。

计划会开源，这篇文章先简单介绍一下。

【软肋】

其实bootstrap已经很好了，唯一的软肋就是js方面有些薄弱，对比easyui就知道了，

可以很明显的知道bootstrap是前端人员创建的，而easyui是偏后端人员创建的。

【积累】

对bootstrap做了一些封装，可以使大家使用更方便，如下：

1.封装了alert

2.封装了confirm

3.封装了dialog

4.封装了msg

5.封装了tooltip

6.封装了popover

7.封装了bstree

8.封装了bstro

【alert】

理由：bootstrap是没有alert插件的，基于模态框封装了一下

效果：

使用方法：

// 无回调
qiao.bs.alert(‘这是一个提示‘);

// 有回调
qiao.bs.alert(‘这是一个提示‘,function(){
	alert(1);
});

【confirm】

理由：同alert

效果：

使用方法：

qiao.bs.confirm(‘确定要这样吗？‘,function(){
	alert(‘点击了确定‘);
},function(){
	alert(‘点击了取消‘);
});

【dialog】

理由：同上

效果：

用法：

qiao.bs.dialog({
	url : ‘/ucenter/role/setUrl/‘ + id,
	title : ‘设置Url‘,
	okbtn : ‘保存‘
}, qiao.role.addUrl);

参数：

qiao.bs.dialog(options,func);

其中options有：

qiao.bs.modaloptions = {
	url 	: ‘‘,
	fade	: ‘fade‘,
	close	: true,
	title	: ‘title‘,
	btn	: false,
	okbtn	: ‘确定‘,
	qubtn	: ‘取消‘,
	msg	: ‘msg‘,
	big	: false,
	show	: false,
	remote	: false,
	backdrop: ‘static‘,
	keyboard: true,
	style	: ‘‘
};

func是回调函数，

    返回true，关闭dialog

    返回false，不关闭dialog

【msg】

理由：bootstrap没有提示消息的js组件，封装了一个

效果：

用法：

// 只有提示
qiao.bs.msg(‘一个提示‘);

// 自定义配置
qiao.bs.msg({
	msg  : ‘危险提示‘,
	type : ‘danger‘,
	time : 2000
});

【tooltip】

理由：bootstrap的tooltip每次都需要手动激活，比较麻烦

效果：

用法：

// 默认提示
$(‘#test1‘).bstip(‘123‘);

// 可配置
$(‘#test1‘).bstip({
	animation 	: true,
	container 	: ‘body‘,
	content		: ‘content‘,
	html		: true,
	placement	: ‘bottom‘,
	title		: ‘‘,
	trigger		: ‘hover‘//click | hover | focus | manual.
});

【popover】

理由：同上

效果：

用法：

// 默认提示
$(‘#test1‘).bspop(‘123‘);

// 可配置
$(‘#test1‘).bspop({
	animation 	: true,
	container 	: ‘body‘,
	content		: ‘content‘,
	html		: true,
	placement	: ‘bottom‘,
	title		: ‘‘,
	trigger		: ‘hover‘//click | hover | focus | manual.
});

【bstree】

理由：

bootstrap最大的软肋就是做后台ui的时候功能太弱，例如tree组件，datagrid组件都没有，在这点上easyui完胜bootstrap，

封装了tree，这个比较复杂。

效果：

可编辑效果：

选择效果：

用法：

数据结构：

以java为例，需要有这几个属性：

	private int id;
	private String url;
	private String text;
	private boolean checked = false;
	private List<QTree> children;

js参数：

qiao.bs.tree.options = {
	url 	: ‘/ucenter/menu/‘,
	height 	: ‘600px‘,
	open	: true,
	edit	: false,
	checkbox: false,
	showurl	: true
};

【bstro】

理由：这个是封装了一个网站引导插件bootstro

效果：

看这里：http://zhidao.beiwaionline.com/

或者：

用法：

	var isbstro = $.cookie(‘bootstro‘);
	if(!isbstro){
		qiao.bs.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:‘/‘});}
		});
	}

【效果】

总得来说，有几点效果：

1.大大简化使用bootstrap的方法

2.封装了一些常用插件

【开源】

等时间充足，和BootstrapQ更加完善后会开源。

【更多】

更多文章请看：http://uikoo9.com/blog/list

BootstrapQ 封装Bootstrap tree，dialog等