(function ($){
$.fn.qrcode = function (options){
// 如果参数书字符串,默认设置成二维码内容
if (typeof options === 'string') {
options = { text: options };
}
// 参数合并
options = $.extend({}, {
text: '', // 二维码内容
logo: '', // 二维码Logo
size: 256, // 二维码尺寸
margin: 0, // 二维码边距
level: 'h', // 二维码纠错等级
point: '000000', // 定位点外框颜色
inpoint: '000000', // 定位到内部颜色
background: "ffffff", // 二维码背景色
foreground: "000000", // 二维码前景色
loading: '/Res/images/default/loading.gif' // 加载等待图片
}, options);
// 遍历元素生成二维码
return this.each(function (){
var box = $(this),
qrcode = 'http://qr.liantu.com/api.php'
+ '?text=' + encodeURIComponent(options.text)
+ '&w=' + options.size
+ '&m=' + options.margin
+ '&el=' + options.level
+ '&bg=' + options.background
+ '&fg=' + options.foreground
+ '&pt=' + options.point
+ '&inpt=' + options.inpoint
+ (options.logo ? '&logo=' + options.logo : ''),
image = $('<img title="qrcode" alt="qrcode" src="' + qrcode + '"/>'),
loading = '<span style="display:inline-block;margin:0;padding:0;'
+ 'width:' + options.size + 'px;'
+ 'height:' + options.size + 'px;'
+ 'background:url(' + options.loading + ') no-repeat center;'
+ '*zoom:1;"></span>';
// 生成加载等待图标
box.html(loading);
// 二维码加载成功
image.on('load.qrcode', function (){
// 渲染二维码
box.empty().append(this);
// 解除所有事件
image.off('load.qrcode');
image.off('error.qrcode');
// 触发load事件
box.triggerHandler('load', image[0]);
});
// 二维码加载错误
image.on('error.qrcode', function (){
// 解除所有事件
image.off('load.qrcode');
image.off('error.qrcode');
// 触发error事件
box.triggerHandler('error', image[0]);
});
});
};
}(jQuery));
Last active
September 24, 2021 08:38
-
-
Save nuintun/92a0722548601e712705 to your computer and use it in GitHub Desktop.
利用联图二维码API生成二维码的jQuery插件
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment