1query.barcode.js安装

同其他jquery插件一样,只需要将jquery框架和jquery.barcode.js导入页面即可。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>

2jquery.barcode.js使用方法

2.1)定义一个DOM对象作为条形码/二维码的容器

<div id="bcTarget"></div>

2.2)使用javascript调用jquery.barcode.js绘制条形码/二维码

$("#bcTarget").barcode("1234567890128", "ean13");

jquery对象扩展方法barcode参数说明

barcode: function(datas, type, settings)

1.datas参数支持2种类型

  • string:要绘制的条形码字符串内容(依赖于条形码的类型)。如果条形码类型能容纳这些字符,并且存在校验不是强制性的,字符串的ISE将会自动计算(原文:If barcode type include it, the presence of the checksum is not mandatory, it ise automatically recalculated)
  • object

2.type (string):条形码类型

  • codabar
  • code11 (code 11)
  • code39 (code 39)
  • code93 (code 93)
  • code128 (code 128)
  • ean8 (ean 8)
  • ean13 (ean 13)
  • std25 (standard 2 of 5 - industrial 2 of 5)
  • int25 (interleaved 2 of 5)
  • msi
  • datamatrix (ASCII + extended)

3.settings (object):条形码样式的配置

barWidth(条形码款)、barHeight(容器高)、showHRI(是否显示条形码内容)、bgColor(背景色)、color(条形码颜色)、fontSize(内容字体大小)、output(如何绘制条形码:css,svg,bmp,canvas,注意svg,bmp,canvas不支持IE,最好不用。)

示例代码

<input type="button" onclick='$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});' value="ean13">
<input type="button" onclick='$("#bcTarget2").barcode("1234567", "int25",{barWidth:2, barHeight:30});' value="int25">
<input type="button" onclick='$("#bcTarget3").barcode({code: "1234567", crc:false}, "int25",{barWidth:2, barHeight:30});' value="int25 without crc">

JQUERY PLUGIN:BARCODE条形码插件的更多相关文章

  1. jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  2. jquery 条形码 插件jquery-barcode使用

    转载文章   jquery 条形码 插件jquery-barcode使用 条码官网: http://barcode-coder.com/en/barcode-jquery-plugin-201.htm ...

  3. The ultimate jQuery Plugin List(终极jQuery插件列表)

    下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...

  4. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. 16款最佳的 jQuery Time Picker 时间选择插件

    jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQue ...

  7. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  8. jQuery plugin: Autocomplete 参数及实例

    官网:jQuery plugin: Autocomplete          (注:此插件已经不再更新.它的继任者是jQuery UI的一部分,) 此插件依赖于 jquery 1.2.6 --- j ...

  9. 分享15款为jQuery Mobile定制的插件

    jQuery Mobile 1.0 已经发布了, 做为jQuery的移动设备类库, 并且依靠着jQuery这个及其受欢迎的类库,必将带给大家不一样的使用体验,基于jQuery Mobile的插件开发必 ...

随机推荐

  1. px与rem关系及转换

    PX特点 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能够调整px和em,rem,但是96%以上的中 ...

  2. webrtc初识

    最近由于项目的需求,开始接触了webrtc这个东西.没想到这东西的门槛还是蛮高的,接下来分享一下我所踩过的坑,希望对以后初次接触这个东西的人有所帮助. webrtc官网 第一步当然是看官方主页了(ww ...

  3. Mybatis与Spring整合,使用了maven管理项目,作为初学者觉得不错,转载下来

    转载自:http://www.cnblogs.com/xdp-gacl/p/4271627.html 一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn archetype ...

  4. canvas简单处理图片(反色处理)

    用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理. <!DOCTYPE html> <html> <head> <meta ...

  5. GIT远程仓库地址变更

    将VS2013的解决方案添加到GIT源代码管理后会增加.gitattributes和.gitignore 2个文件以及.git目录 设置远程地址的文件在.git目录下的config文件中 直接修改上图 ...

  6. angularJs之service

    自定义服务: 方法一:controller中返回值,service中return <!DOCTYPE html> <html> <head> <meta ch ...

  7. 本机,同机房,同城,异地,不同城,腾讯云ping延时值

    本机,同机房,同城,异地,不同城,腾讯云ping延时值 ping本机: 0.01ms ping同机房机器: 0.1ms ping同城机器: 1ms ping不同城机器: 20ms 北(南)方ping南 ...

  8. Hibernate操作指南-搭建一个简单的示例(基于原生API和注解)

  9. 常用prototype函数

    $("spcode").value --取得当前页面的值的value,可以赋值 $F('spcode')         --不能赋值 $!spcode             - ...

  10. ios - 谓词的使用

    谓词在搜索的时候非常管用.简单示例代码如下: 分类Person.h文件 #import <Foundation/Foundation.h> @interface Person : NSOb ...