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
原始碼:https://github.com/uikoo9/jfinalQ
更多精彩內容:http://uikoo9.com/
求打賞(長按圖片即可識別)~ |
捐助列表:http://uikoo9.com/donate/ |