Sunday, December 3, 2017

Simple jQuery Based Barcode Generator - Barcode

Long time back, we have shared post about "How to Generate Bar Code with PHP". In that post we have given complete explanations and details about barcode code generation. 
Barcode - Wikipedia

Now Today we are going to discuss similar topic as it is very useful and provide the simple way to generate the barcode using readily available JQuery Plugin.
The best part is that this lightweight jQuery plugin has the ability to generates 8 types of Barcode and outputs as CSS, BMP, SVG or Canvas for your work.

Reference : 
https://github.com/artdomg/barcode-jquery

Barcode types supported:
  1. standard 2 of 5 (std25)
  2. interleaved 2 of 5 (int25)
  3. ean 8 (ean8)
  4. ean 13 (ean13)
  5. upc (upc)
  6. code 11 (code11)
  7. code 39 (code39)
  8. code 93 (code93)
  9. code 128 (code128)
  10. codabar (codabar)
  11. msi (msi)
  12. datamatrix (datamatrix)
Output formats supported:
  1. CSS
  2. BMP (not usable in IE)
  3. SVG (not usable in IE)
  4. Canvas (not usable in IE)
If you want to change size,color,font etc of barcode, then you need to perform some modification in setting variable.
var settings = {
barWidth: 2,
barHeight: 50,
moduleSize: 5,
showHRI: true,
addQuietZone: true,
marginHRI: 5,
bgColor: "#FFFFFF",
color: "#000000",
fontSize: 10,
output: "css",
posX: 0,
posY: 0
};

Lets see the complete source code to generate barcode using JQuery:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>
<script>
$(document).ready(function() {

var settings = {
barWidth: 2,
barHeight: 50,
moduleSize: 5,
showHRI: true,
addQuietZone: true,
marginHRI: 5,
bgColor: "#FFFFFF",
color: "#000000",
fontSize: 10,
output: "css",
posX: 0,
posY: 0
};

$( "#GenerateBarcode" ).on( "click", function() {
var code = $("#barcode").val() ;
$("#demo").barcode(
code, // Value barcode (dependent on the type of barcode)
"code128", // type (string)
settings
);
});
     
});
</script>
</head>
<body style="margin:100px auto;width:500px"> 
<h2> JQuery Barcode Generator </h2>
<input type="text" id ="barcode" name="barcode" autocomplete="off" />
<input type="button" class="button" id="GenerateBarcode" name="GenerateBarcode" value="Generate Barcode">
<div style="margin-top:22px;"> </div>
<div id="demo"></div>
</body>
</html>

Output:
-------------------
Free Online Barcode Generator: Make a Custom Barcode in Seconds
You can easily generate different barcode type by making small change in JQuery code :

To generate barcode type as "ean 13" :

Do the below change in Jquery Code.
$("#demo").barcode(
code, // Value barcode (dependent on the type of barcode)
"ean13", // type (string)
settings
);

Similarly you can generate the different  barcode type, by mentioning the barcode type in JQuery barcode function.

Check out our blog archive on the topic if you’re looking to learn about How to Generate Bar Code with PHP.

I hope this tutorial will help you...




Download Link : 
----------------------------------




No comments:

Post a Comment