European Article Number (欧洲物品编码的缩写),其中共计13位代码的EAN-13是比较通用的一般终端产品的条形码协议和标准,主要应用于超级市场和其它零售业,因此这种是我们比较常见的,随便拿起身边的一个从超市买来的商品都可以从包装上看得到。关于条形码的结构介绍可以查看百度百科。
使用方法
如果你需要将该EAN13条形码插件作为jQuery插件来使用,那么需要在页面中引入jQuery和jquery-ean13.min.js文件。
<
script
type
=
"text/javascript"
src
=
"js/jquery.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"dist/jquery-ean13.min.js"
></
script
>
|
要通过纯JavaScript来调用该EAN13条形码,需要在页面中引入ean13.min.js文件。
<
script
type
=
"text/javascript"
src
=
"dist/ean13.min.js"
></
script
>
|
HTML结构
要制作一个EAN13条形码需要在页面上添加一个<canvas>
元素。
<
canvas
id
=
"ean"
width
=
"400"
height
=
"200"
></
canvas
>
|
如果你想修改EAN13条形码的大小,只需要设置<canvas>
元素的宽度和高度即可。
调用插件
下面的方法会显示不带任何参数选项的最基本的EAN13条形码:
JavaScript:
var
element = document.getElementById(
"ean"
);
new
EAN13(element,
"9002236311036"
);
|
jQuery:
$(
"#ean"
).EAN13(
"9002236311036"
);
|
配置参数
该EAN13条形码插件提供了一些可用的配置参数和回调函数,要使用它们,可以简单的在初始化插件的时候在第二个参数中提供一个参数对象。例如:
JavaScript:
var
options = {
number:
false
,
prefix:
false
,
onSuccess:
function
(){
alert(
"Heeeey!"
);
}
}
new
EAN13(document.getElementById(
"ean"
),
"9002236311036"
, options);
|
jQuery:
$(
"#ean"
).EAN13(
"9002236311036"
, {
number:
false
,
prefix:
false
});
|
参数 | 类型 | 默认值 | 描述 |
number | boolean | true | 如果设置为true ,那么数字会以可读的方式显示在条形码的下方 |
prefix | boolean | true | 如果设置为true ,国家前缀(确切地来说,它的第一个数字)会被打印在条形码的左边 |
color | string | #000 | 条形码的颜色,接收任何CSS颜色:#ff0000 , green , rgb(0,0,0) 或 rgb(0,0,0,0.5) |
background | string | null | 条形码的背景色,接收任何CSS颜色:#ff0000 , green , rgb(0,0,0) 或 rgb(0,0,0,0.5) ,默认值null =transparent |
debug | boolean | false | 如果设置为true ,条形码上会被绘制某种模式,以用于识别线条 |
padding | int | 0 | 在条形码间添加一些padding值,单位为像素 |
回调函数
回调函数 | 描述 |
onValid | 当提供的代码校验和是正确的时候触发,如果没有提供12位的校验码则不会触发 |
onInvalid | 当提供的代码校验和是不正确的时候触发,如果没有提供12位的校验码则不会触发 |
onSuccess | 在条形码绘制结束并且没有错误发生的时候触发 |
onError | 在绘制条形码过程中发生错误时触发 |