Getting Started with JQuery Barcode widget
3 Apr 20183 minutes to read
This section explains you briefly on how to create one dimensional and two dimensional barcodes and customizing its appearance in your JavaScript application.
You can easily configure the barcode to any DOM element such as div
or span
. It takes text
and symbologyType
as input and renders the encoded text as barcode.
Adding a QR Code
Create an HTML file using the following code example for ejBarcode
creation.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started Essential JS</title>
<!-- Style sheet for default theme (flat azure)-->
<link href="http://cdn.syncfusion.com/20.1.0.55/js/web/flat-azure/ej.widgets.all.min.css" rel="stylesheet" />
<!--scripts-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdn.syncfusion.com/20.1.0.55/js/ej.widgets.all.min.js"></script>
<!--Add custom scripts here -->
</head>
<body>
<!-- Add Barcode element here. -->
</body>
</html>
Add div
container for barcode rendering.
<div id="barcode"></div>
Set the symbologyType and provide input URL to the text property to render the QR Code.
<script type="text/javascript">
$(function() {
// document ready
// simple control creation
$("#barcode").ejBarcode({
text: "http://www.syncfusion.com",
symbologyType: "qrbarcode"
});
});
</script>
Adding a Code39 Barcode
Create an HTML file using the following code example for creating a Code39 barcode.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started Essential JS</title>
<!-- Style sheet for default theme (flat azure)-->
<link href="http://cdn.syncfusion.com/20.1.0.55/js/web/flat-azure/ej.widgets.all.min.css" rel="stylesheet" />
<!--scripts-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdn.syncfusion.com/20.1.0.55/js/ej.widgets.all.min.js"></script>
<!--Add custom scripts here -->
</head>
<body>
<!-- Add Barcode element here. -->
</body>
</html>
Add div
container for barcode rendering.
<div id="barcode"></div>
Set the symbologyType and provide input to the text property to render the Code39 barcode.
$("#barcode").ejBarcode({
text: "SYNCFUSION",
symbologyType: "code39"
});