jQuery插件jquery-barcode实现条码打印的方法


Posted in Javascript onNovember 25, 2015

本文实例讲述了jQuery插件jquery-barcode实现条码打印的方法。分享给大家供大家参考,具体如下:

这是一个纯js的jQuery插件,项目地址:http://barcode-coder.com/en/barcode-jquery-plugin-201.html

使用示例:

<!doctype html>
<html>
 <head>
  <title>jQuery Barcode</title>
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="jquery-barcode.js"></script>
  <style type="text/css">
  .barcodeImg{margin:10px 0px}
  </style>
 </head>
 <body>
  <div style="margin:10px"> 
   <input id="src" value="11225921991"></input><br/>    
   <input type="button" onclick='code11()' value="code11">  
   <input type="button" onclick='code39()' value="code39"> 
   <input type="button" onclick='code93()' value="code93">
   <input type="button" onclick='code128()' value="code128">
   <input type="button" onclick='ean8()' value="ean8">   
   <input type="button" onclick='ean13()' value="ean13">
   <input type="button" onclick='ean13()' value="std25">
   <input type="button" onclick='int25()' value="int25">
   <input type="button" onclick='msi()' value="msi">
   <input type="button" onclick='datamatrix()' value="datamatrix">
   <div id="bcTarget" class="barcodeImg"></div>   
  </div>
  <script type="text/javascript">
  function code11(){
   $("#bcTarget").empty().barcode($("#src").val(), "code11",{barWidth:2, barHeight:30,showHRI:false});
  }
  function code39(){
   $("#bcTarget").empty().barcode($("#src").val(), "code39",{barWidth:2, barHeight:30,showHRI:false});
  }
  function code93(){
   $("#bcTarget").empty().barcode($("#src").val(), "code93",{barWidth:2, barHeight:30,showHRI:false});
  }
  function code128(){
   $("#bcTarget").empty().barcode($("#src").val(), "code128",{barWidth:1, barHeight:30,showHRI:false});
  }
  function ean8(){
   $("#bcTarget").empty().barcode($("#src").val(), "ean8",{barWidth:2, barHeight:30,showHRI:false});
  }
  function ean13(){
   $("#bcTarget").empty().barcode($("#src").val(), "ean13",{barWidth:2, barHeight:30,showHRI:false});
  }
  function std25(){
   $("#bcTarget").empty().barcode($("#src").val(), "std25",{barWidth:2, barHeight:30,showHRI:false});
  }
  function int25(){
   $("#bcTarget").empty().barcode($("#src").val(), "int25",{barWidth:2, barHeight:30,showHRI:false});
  }
  function msi(){
   $("#bcTarget").empty().barcode($("#src").val(), "msi",{barWidth:2, barHeight:30,showHRI:false});
  }
  function datamatrix(){
   $("#bcTarget").empty().barcode($("#src").val(), "datamatrix",{barWidth:2, barHeight:30,showHRI:false});
  }
  </script>
 </body>
</html>

运行效果截图如下:

jQuery插件jquery-barcode实现条码打印的方法

完整实例代码代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
javascript中递归的两种写法
Jan 17 Javascript
js和jquery中获取非行间样式
May 05 jQuery
简单的Vue SSR的示例代码
Jan 12 Javascript
JavaScript编写简单的计算器
Nov 25 #Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 #Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 #Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 #Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 #Javascript
jquery+css实现动感的图片切换效果
Nov 25 #Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
You might like
PHP实现图片简单上传
2006/10/09 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
JavaScript多线程详解
2015/08/12 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
学生自我鉴定模板
2013/12/30 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
企业出纳岗位职责
2014/03/12 职场文书
生日宴会主持词
2014/03/20 职场文书
公司开业致辞
2015/07/29 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
2022年四月新番
2022/03/15 日漫