jQWidgets jqxGauge LinearGauge valueChanged 事件(1)

📌 相关文章

📜 jQWidgets jqxGauge LinearGauge valueChanged 事件(1)

📅 最后修改于: 2023-12-03 15:32:17.523000 🧑 作者: Mango

介绍jQWidgets jqxGauge LinearGauge valueChanged 事件

概述

jQWidgets jqxGauge LinearGauge 是一个可自定义的仪表盘组件，它支持多种类型的仪表盘，如圆形和线性仪表盘。其中，valueChanged 事件是指当仪表盘的值发生变化时所触发的事件。

使用

使用 jQWidgets jqxGauge LinearGauge 组件以及 valueChanged 事件，需要先在页面中引入相关的 js 和 css 文件，然后在 HTML 中创建一个容器元素，用于展示仪表盘组件，如下所示：

<div id="gauge"></div>

接着，在 JavaScript 中初始化仪表盘组件，并监听 valueChanged 事件，代码如下：

$(function () {
  // 初始化仪表盘组件
  $('#gauge').jqxLinearGauge({
    value: 50,
    orientation: 'vertical',
    ranges: [
      { startValue: 0, endValue: 30, style: { fill: '#4cb848', stroke: '#4cb848' }, endWidth: 5 },
      { startValue: 30, endValue: 70, style: { fill: '#fad00b', stroke: '#fad00b' }, endWidth: 10 },
      { startValue: 70, endValue: 100, style: { fill: '#e73127', stroke: '#e73127' }, endWidth: 15 }
    ]
  });

  // 监听 valueChanged 事件
  $('#gauge').on('valueChanged', function (event) {
    console.log(event.args.value);
  });
});

从上面的代码可以看到，我们先使用 jqxLinearGauge 函数初始化了一个线性仪表盘组件，并设置了 value 和 ranges 属性。其中，ranges 属性用于定义仪表盘上的不同区间。

接着，我们使用 on 函数监听了 valueChanged 事件，并通过 event.args.value 来获取仪表盘的当前值。

示例

下面是一个基于 jQWidgets jqxGauge LinearGauge 的简单例子，展示了 valueChanged 事件的使用效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jQWidgets jqxGauge LinearGauge valueChanged 事件</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/4.5.1/jqwidgets.min.css" integrity="sha384-NNCdAyLymvv8gNOcNwvPuwfJ7V2Q9/9I7z/VIKjVTBoZTsJnflsRf7s2sTucTIfy" crossorigin="anonymous">
</head>

<body>
  <div id="gauge"></div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/4.5.1/jqxcore.min.js" integrity="sha384-PdKAohLcM0uU58Ew0evGVWg7VryzfQPZf0Gz62v9rvWJPZGivLxJbAQ/+ahBwflR" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/4.5.1/jqxbuttons.min.js" integrity="sha384-YT/xTfsF83qX9YbFux1DDx6HVlE6wI8/oUWV7yfDmPnV7vJ8G1WQfAZjfRxal0/p" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/4.5.1/jqxgauge.min.js" integrity="sha384-xaq+L+Sf891OOoozPgjLXedghFYJuzSV2nJA54oG5ViDDLS1dxlVs1AHmcYYrgaG" crossorigin="anonymous"></script>
  <script>
    $(function () {
      // 初始化仪表盘组件
      $('#gauge').jqxLinearGauge({
        value: 50,
        orientation: 'vertical',
        ranges: [
          { startValue: 0, endValue: 30, style: { fill: '#4cb848', stroke: '#4cb848' }, endWidth: 5 },
          { startValue: 30, endValue: 70, style: { fill: '#fad00b', stroke: '#fad00b' }, endWidth: 10 },
          { startValue: 70, endValue: 100, style: { fill: '#e73127', stroke: '#e73127' }, endWidth: 15 }
        ]
      });

      // 监听 valueChanged 事件
      $('#gauge').on('valueChanged', function (event) {
        console.log(event.args.value);
      });
    });
  </script>
</body>

</html>

以上代码在网页中显示出一个线性仪表盘，当拖动仪表盘指针时，控制台会不断打印出当前仪表盘的值。效果如下图所示：

jqxGauge LinearGauge valueChanged 示例效果图