jQWidgets jqxProgressBar invalidValue 事件(1)

📌 相关文章

📜 jQWidgets jqxProgressBar invalidValue 事件(1)

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

jQWidgets jqxProgressBar invalidValue 事件

介绍

jQWidgets jqxProgressBar 是一款基于jQuery的进度条插件，提供了一系列事件来响应进度条的状态变化。其中，invalidValue 事件会在设置进度条的值为无效值时触发，例如将值设置为小于最小值或大于最大值的数。

使用

使用 jqxProgressBar 的 invalidValue 事件需要以下步骤：

引入相关文件。

<link rel="stylesheet" href="//cdn.jsdelivr.net/jqwidgets/1.5.3/jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jqwidgets/1.5.3/jqwidgets/jqxcore.js"></script>
<script src="//cdn.jsdelivr.net/jqwidgets/1.5.3/jqwidgets/jqxprogressbar.js"></script>

创建 jqxProgressBar。

<div id="jqxProgressBar"></div>

// 初始化 jqxProgressBar
$('#jqxProgressBar').jqxProgressBar({
  width: 300,
  height: 30,
  min: 0,
  max: 100,
  value: 50
});

使用 invalidValue 事件。

// 注册 invalidValue 事件
$('#jqxProgressBar').on('invalidValue', function (event) {
  console.log('The value you set is invalid!');
});

示例

以下是一个简单的例子，当将进度条的值设置为小于最小值或大于最大值时，会输出提示信息到控制台。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/jqwidgets/1.5.3/jqwidgets/styles/jqx.base.css" type="text/css" />
  <script src="//cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/jqwidgets/1.5.3/jqwidgets/jqxcore.js"></script>
  <script src="//cdn.jsdelivr.net/jqwidgets/1.5.3/jqwidgets/jqxprogressbar.js"></script>
</head>
<body>
  <div id="jqxProgressBar"></div>
  <script>
    $(function () {
      // 初始化 jqxProgressBar
      $('#jqxProgressBar').jqxProgressBar({
        width: 300,
        height: 30,
        min: 0,
        max: 100,
        value: 50
      });

      // 注册 invalidValue 事件
      $('#jqxProgressBar').on('invalidValue', function (event) {
        console.log('The value you set is invalid!');
      });

      // 设置小于最小值的值
      $('#jqxProgressBar').jqxProgressBar('val', -10);

      // 设置大于最大值的值
      $('#jqxProgressBar').jqxProgressBar('val', 110);
    })
  </script>
</body>
</html>

代码片段

<div id="jqxProgressBar"></div>
<script>
  $(function () {
    // 初始化 jqxProgressBar
    $('#jqxProgressBar').jqxProgressBar({
      width: 300,
      height: 30,
      min: 0,
      max: 100,
      value: 50
    });

    // 注册 invalidValue 事件
    $('#jqxProgressBar').on('invalidValue', function (event) {
      console.log('The value you set is invalid!');
    });

    // 设置小于最小值的值
    $('#jqxProgressBar').jqxProgressBar('val', -10);

    // 设置大于最大值的值
    $('#jqxProgressBar').jqxProgressBar('val', 110);
  })
</script>