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/