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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
浅谈JS的原型和原型链
Jun 04 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 mkdir()定义和用法
2009/01/14 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
php学习之运算符相关概念
2011/06/09 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
js+css在交互上的应用
2010/07/18 Javascript
javascript event 事件解析
2011/01/31 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
JS实现纸牌发牌动画
2021/01/19 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
python装饰器代码深入讲解
2021/03/01 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
关于爱情的广播稿
2014/01/16 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书