jquery项目好用的插件汇总
一.打包
一般情况也就js需要压缩下,mac的话就用gulp配置打包so easy
二.避免300毫秒延时问题
1/禁止缩放
<meta name="viewport" content="width=device-width user-scalable= 'no'">
使用这个方法必须完全禁用缩放来达到目的,虽然大部分移动端能解决这个延迟问题,但是部分苹果手机还是不行。
2/fastclick.js
第一步:在页面中引入fastclick.js文件。
第二步:在js文件中添加以下代码
在 window load 事件之后,在body上调用FastClick.attach()即可。
eg(jquery):
$(document).ready(function(){
FastClick.attach(document.body);
});
三。hadlebar.js(引入模版更好遍历渲染)==》注:数据改变必须手动操作dom树,不能数据驱动视图
五/有时候点击会循环执行几次,可通过如下方法破除
$('.confirmShare').unbind('click').click(function(){
});
六/选择省市区好用的插件city-picker.js
$("#express_start").cityPicker({
// "title": "选择快递收件地址",
"onChange": function(picker, values, displayValues) {
// console.log(values, displayValues);
}
});
七/jq好用的表单插件==》weui
四。上传图片==》用webuploader
1.引入webuploader的js
2.
//上传图片
myUploader[attrId] = WebUploader.create({
swf: 'vender/Uploader.swf', // swf文件路径
server: 'http://118.178.118.114/qz-declareform/upload', // 文件接收服务端
pick: '#'+attrId, // 选择文件的按钮。可选
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
formData: {
token: sessionStorage.getItem('token')
},
chunkSize: 2 * 1024 * 1024,
fileSingleSizeLimit: 2 * 1024 * 1024, // 单个文件大小限制 2M
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
//允许重复上传
duplicate :true
});
myUploader[attrId].on( 'fileQueued', function( file ) {
if(attrInfoUser[attrId].length>=5){
$.toast('上传图片不得超过5张', "text");
return;
}
myUploader[attrId].makeThumb(file, function (error, src) {
if (error) {
$.toast('上传失败', "text");
return;
}
attrInfoUser[attrId].push(src);
console.log(src,555555555555);
}, 200, 200);
myUploader[attrId].upload();
});
//图片上传成功
myUploader[attrId].on('uploadSuccess',function(file,response){
if(response.success){
$.toast('上传成功', "text");
attrInfoPost[attrId].push(response.data);
// attrInfoUser[attrId].push(response.data);
$('.previewBox'+attrId).show();
$('.uploadType'+attrId).show().children('.data').hide().siblings('.phone').show();
}else{
$.toast('上传失败', "text");
}
});
myUploader[attrId].on( 'error', function( file ) {
$.toast('上传失败!', "text");
});