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/ |