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.
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.
Barcode types supported:
Lets see the complete source code to generate barcode using JQuery:
Output:
-------------------
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:
- standard 2 of 5 (std25)
- interleaved 2 of 5 (int25)
- ean 8 (ean8)
- ean 13 (ean13)
- upc (upc)
- code 11 (code11)
- code 39 (code39)
- code 93 (code93)
- code 128 (code128)
- codabar (codabar)
- msi (msi)
- datamatrix (datamatrix)
- CSS
- BMP (not usable in IE)
- SVG (not usable in IE)
- 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:
-------------------
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 :
----------------------------------
Usefull !
ReplyDelete