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.

html

<!DOCTYPE html>
<html>
   <head>
      <title>Getting Started Essential JS</title>
      <!-- Style sheet for default theme (flat azure)-->
      <link href="http://cdn.syncfusion.com/19.3.0.43/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/19.3.0.43/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.

html

<div id="barcode"></div>

Set the symbologyType and provide input URL to the text property to render the QR Code.

javascript

<script type="text/javascript">
   $(function() {
      // document ready
      // simple control creation
      $("#barcode").ejBarcode({
         text: "http://www.syncfusion.com",
         symbologyType: "qrbarcode"
      });
   });
</script>

Getting-Started_img2

Adding a Code39 Barcode

Create an HTML file using the following code example for creating a Code39 barcode.

html

<!DOCTYPE html>
<html>
   <head>
      <title>Getting Started Essential JS</title>
      <!-- Style sheet for default theme (flat azure)-->
      <link href="http://cdn.syncfusion.com/19.3.0.43/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/19.3.0.43/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.

html

<div id="barcode"></div>

Set the symbologyType and provide input to the text property to render the Code39 barcode.

javascript

$("#barcode").ejBarcode({
   text: "SYNCFUSION",
   symbologyType: "code39"
});

Getting-Started_img3