博客

jQWidgets jqxBarcode displayLabel属性

  • Post category:jquery

jQWidgets是一个基于jQuery的UI组件库，提供了丰富的UI组件和工具，包括表格、图表、表单、日历、菜单等。其中，jqxBarcode是jQWidgets中的一个条形码组件，可以用于生成各种类型的条形码。jqxBarcode组件具有多种属性，其中displayLabel属性用于控制是否显示条形码标签。

displayLabel属性

displayLabel属性用于控制是否显示条形码标签。当displayLabel属性设置为true时，条形码标签将显示在条形码下方；当displayLabel属性设置为false时，条形码标签将不显示。

以下是displayLabel属性的基本语法：

$('#jqxBarcode').jqxBarcode({
  displayLabel: true|false
});

示例1：显示条形码标签

以下是一个示例，演示如何在页面中使用jqxBarcode组件，并显示条形码标签：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQWidgets Barcode Example</title>
  <link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/styles/jqx.base.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxbarcode.js"></script>
</head>
<body>
  <div id="jqxBarcode"></div>
  <script>
    $(document).ready(function () {
      $('#jqxBarcode').jqxBarcode({
        value: '1234567890',
        displayLabel: true
      });
    });
  </script>
</body>
</html>

在这个示例中，我们使用jqxBarcode组件创建了一个条形码，并将displayLabel属性设置为true，以显示条形码标签。

示例2：隐藏条形码标签

以下是另一个示例，演示如何在页面中使用jqxBarcode组件，并隐藏条形码标签：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQWidgets Barcode Example</title>
  <link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/styles/jqx.base.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jqwidgets.com/jquery.jqwidgets/4.5.3/jqwidgets/jqxbarcode.js"></script>
</head>
<body>
  <div id="jqxBarcode"></div>
  <script>
    $(document).ready(function () {
      $('#jqxBarcode').jqxBarcode({
        value: '1234567890',
        displayLabel: false
      });
    });
  </script>
</body>
</html>

在这个示例中，我们使用jqxBarcode组件创建了一个条形码，并将displayLabel属性设置为false，以隐藏条形码标签。

综上所述，displayLabel属性用于控制是否显示条形码标签。您可以将displayLabel属性设置为true以显示条形码标签，或将其设置为false以隐藏条形码标签。

Tags: