jfinalQ开发教程10-qiao.js：js工具和bootstrap封装

qiao.js

1.说明

主要分为两块：常用js封装，bootstrap组件封装，已经开源到github：https://github.com/uikoo9/qiao.js

2.项目结构

_other：无关的东西

plugins：qiao.util.js的示例

qiao：qiao.bs.js和qiao.util.js

qiao-coolie：模块化的qiao.js

qiao.js：qiao.bs.js+qiao.util.js

qiao.util.js

1.qser

类似于jquery的.serialize()方法，不同的是返回的是一个js对象，

data : $form.qser()

2.qdata

类似与jquery的.data()方法，不同的是返回的是一个js对象，

var url = $(this).qdata().url;
// 对应的html
<a href="javascript:void(0);" data="id:${tree.id};url:${tree.url};"></a>

3.qiao.on

对jquery的.on()方法稍作封装，

qiao.on('.regbtn', 'click', web.reg.reg);

4.qiao.is

一些常用的判断，

qiao.is = function(str, type){
	if(str && type){
		if(type == 'number') return /^\d+$/g.test(str);
		if(type == 'mobile') return /^1\d{10}$/g.test(str);
	}
};

5.qiao.ajax

对jquery的.ajax()方法封装，

	qiao.ajax({
		url : '/reg/reg',
		data : $form.qser()
	}, function(res){
		if(res){
			$h5.text(res.msg);
		}else{
			$h5.text('ajax fail');
		}
	});

6.qiao.totop

返回顶部的方法，当点击后会平滑的回到页面顶部，

qiao.totop('#back-to-top');
// 对应的html
<div id="back-to-top"></div>

7.qiao.qcode

js生成二维码的封装，

需要引入qrcode，<script src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

$('.qrcode').each(function(){
    $(this).qcode($(this).data('src'));
});

示例：http://uikoo9.com/project/dishi

8.qiao.end

到达页面底部后触发回调函数，也可以设置父容器和子容器，当子容器到达父容器底部时触发，

qiao.end(function(){
    // todo
});

9.qiao.cookie

对jquery.cookie.js的封装，主要有三个方法：设置，获取，删除，

需要引入jquery.cookie.js，<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

qiao.cookie(key)：返回key对应的value
qiao.cookie(key, null)： 删除key对应的cookie
qiao.cookie(key, value)：设置key-value的cookie

10.qiao.search

获取url中的参数，

code = q.search('code');
// 对应的url为http://xx.com?code=1

qiao.bs.js

1.alert

用bootstrap的模态框封装的alert组件，有回调函数，

qiao.bs.alert('请选择要删除的记录！',function(){todo...});

2.confirm

用bootstrap的模态框封装的confirm组件，有回调函数，

qiao.bs.confirm('确认要删除所选记录吗？', ok, cancel);

3.dialog

用bootstrap的模态框封装的dialog组件，有回调函数，

qiao.bs.dialog({url : url,title : title}, callback);

4.msg

bootstrap的消息提示组件，

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

5.tooltip

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

6.popover

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

7.scrollspy

滚动监听，可以自定义父容器和滚动容器，

qiao.bs.spy

8.initimg

为页面所有的图片添加bootstrap的响应式，

qiao.bs.initimg

9.bsdate

对https://github.com/eternicode/bootstrap-datepicker的封装，

qiao.bs.bsdate('.qdate');

10.bstro

网站引导组件，对http://clu3.github.io/bootstro.js/的封装，

qiao.bs.bstro([
    ['#bstro-home','<h3 style="margin-top:10px;">效果不错吧~</h3>'],
    ['#bstro-h1','<h3 style="margin-top:10px;">使用也是很简单滴~</h3>']
]);

注意

以上的示例不是很详细，可以参考源码和bootstrapQ的文档，

源码：https://github.com/uikoo9/qiao.js

文档：http://uikoo9.com/bootstrapQ/docs

另外，涉及到大量数据交互的组件，例如tree，datagrid，用freemarker做了封装，

因为感觉数据交互大的不适合让浏览器做渲染，万一用户配置极低呢，

详见jfinalQ中/WEB-INF/view/base/inc.html

jfinalQ2.0

官网：http://uikoo9.com/jfinalQ

源码：https://github.com/uikoo9/jfinalQ

更多精彩内容：http://uikoo9.com/

---

求打赏（长按图片即可识别）~

捐助列表：http://uikoo9.com/donate/