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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • asp.net(C#)生成Code39条形码实例 条码枪可以扫描出

    复制代码 代码如下: using System;using System.Collections;using System.ComponentModel;using System.Drawing;using System.Data; namespace MSCL{    /// <summary>    /// 生成条码Code39    /// </summary>    public class Code39    {      private Hashtable m_Code

  • 支付宝支付开发——当面付条码支付和扫码支付实例

    支付宝支付开发——当面付条码支付和扫码支付实例

    本文介绍支付宝中当面付下属的条码支付.扫码支付.订单查询.退款申请的集成开发过程. 本文分为以下五个部分: 条码支付和扫码支付介绍 申请应用 密钥生成及配置 API及SDK集成 条码支付.扫码支付.订单查询.退款申请  一.条码支付及二维码支付介绍 1. 条码支付 条码支付是支付宝给到线下传统行业的一种收款方式.商家使用扫码枪等条码识别设备扫描用户支付宝钱包上的条码/二维码,完成收款.用户仅需出示付款码,所有收款操作由商家端完成.其使用场景如下: 业务流程: 使用步骤: 用户登陆支付宝钱包,点击

  • C#实现的ZPL条码打印类完整实例

    本文实例讲述了C#实现的ZPL条码打印类.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.IO; using System.Diagnostics; using System.Drawing; using System.Drawing.Drawing2D; using System.Runtime.InteropS

  • 基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成 条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码 这里条形码生成使用了JsBarcode组件进行处理,它支持很多

  • C#条码生成及打印实例代码

    本文实例为大家分享了C#条码生成及打印的方法,供大家参考,具体内容如下 string BarcodeString = "13043404455";//条码 int ImgWidth = 520; int ImgHeight = 120; //打印按钮 private void button1_Click(object sender, EventArgs e) { //实例化打印对象 PrintDocument printDocument1 = new PrintDocument();

  • ASP.net(c#)生成条形码 code39条码生成方法

    这几天一直在弄128条码的事情,找了相关的资料,也没找到.后来没办法只能改成code39的条码.现在把它写出来,与大家分享 1.先下载一种免费的 code39条码字体 2.建个类 为 code39 并写入以下代码 复制代码 代码如下: public sealed class Code39 { #region private variables /// <summary> /// The Space Between each of Title, BarCode, BarCodeString //

  • 无焦点获取条码枪返回值示例

    复制代码 代码如下: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Runtime.InteropServices;using System.Reflection; namespace BookLibraryManagement.CommonTools{    class BarCodeHook    {        public delegate v

  • Google 二维条码 API 整理

    Google 二维条码 API 整理

    QR二维条码简介 QR码- 维基百科 C# 创建生成实例:http://www.codeproject.com/KB/cs/qrcode.aspx 二维条码创建读取程序:http://files.cnblogs.com/zjfree/PsqrEdit_Zh.rar 二维条码在线生成:http://zxing.appspot.com/generator/ 在线解析二维条码:http://zxing.org/w/decode.jspx Google 二维条码 API 官方文档:http://code

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

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

    本文实例讲述了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="

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • jQuery插件zTree实现删除树节点的方法示例

    jQuery插件zTree实现删除树节点的方法示例

    本文实例讲述了jQuery插件zTree实现删除树节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="

  • jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法

    jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法

    本文实例讲述了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法.分享给大家供大家参考.具体如下: 这里介绍jQuery图片左右拖拽特效,无滚动条,将多张图片组合在一起形成的效果,插件使用的是jquery.nicescroll.js,拖动过程中不会出现滚动条,这样更美观了一些,若需要此效果,可参见下边框中的代码. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

  • jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

  • 详解jquery插件jquery.viewport.js学习使用方法

    详解jquery插件jquery.viewport.js学习使用方法

    介绍 Viewport 是一个简单的jQuery插件,为元素添加自定义伪选择器和处理程序,以便在可视窗口内外进行简单的元素检测. 使用方法 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.viewport.js" type="text/javascript"></script&g

  • jquery插件jquery.confirm弹出确认消息

    jquery插件jquery.confirm弹出确认消息

    本文为大家介绍了插件jquery.confirm弹出确认消息的实现方法,具有一定的参考价值,特分享给大家供大家参考,具体内容如下 实现效果: 具体代码: 1.插件默认参数 // 默认参数 $.confirm.defaults = { // 样式 css: "http://static.qianduanblog.com/css/jquery.confirm/default.min.css?v=" + Math.ceil(new Date() / 86400000), // 确认框内容 c

随机推荐