博客

jQuery UI进度条change事件

  • Post category:jquery

概述

jQuery UI 进度条（progressbar）组件是一个可用于指示进度变化的 UI 元素。在进度条发生改变时，可以使用进度条的 change 事件来做出响应。

用法

监听change事件

使用 on 方法监听进度条的 change 事件，传入回调函数，该函数会在进度条每次发生改变时触发。

$( "#progressbar" ).progressbar({
   // 设置进度条的初始值
  value: 25,
  change: function( event, ui ) {
    // 当进度条的值改变时，触发该函数
    console.log( "进度条的值改变了，当前值为：", ui.value );
  }
});

上面的代码中，我们对进度条添加了 value 属性，并在初始化时将值设为 25。然后，我们使用 change 事件监听器来监控进度条的变化，当进度条数值发生变化时，会触发回调函数。回调函数中，我们使用 console.log 语句输出进度条当前的值。

修改change处理函数

我们也可以通过 off 方法去掉进度条的默认的 change 处理函数，然后再用 on 方法绑定自己的处理函数。

$( "#progressbar" ).progressbar({
  value: 25,
  change: function() {
    console.log( "ProgressBar 发生了改变！" );
  }
}).off( "progressbarchange" )
  .on( "progressbarchange", function() {
   console.log( "进度条改变了" );
});

上述代码中，我们首先定义了一个默认的 change 处理函数，然后通过调用 off 方法来去掉这个默认处理函数，接着调用 on 方法添加自己的处理函数。

示例

示例一 — 实时显示进度百分比

该示例展示如何使用 change 事件来实时显示进度条的进度百分比。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
  <meta charset="utf-8">
  <title>jQuery UI 进度条示例</title>
  <style>
    #progressbar {
      position: relative;
      width: 80%;
      margin: 20px auto;
    }
    #progress-label {
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 20px;
      font-family: "微软雅黑";
      margin-left: -50px;
      margin-top: -20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="progressbar"></div>
  <div id="progress-label">0%</div>
  <script>
    $( function() {
      // 获取进度条元素
      var progressbar = $( "#progressbar" );

      // 初始化进度条并设置最大值为 100
      progressbar.progressbar({
        max: 100,
        value: 0, // 初始值为 0
        // 注册 change 事件
        change: function( event, ui ) {
          // 获取当前进度 (仍然是 0~100)
          var currentProgress = progressbar.progressbar( "value" );
          // 显示当前进度的百分比
          $( "#progress-label" ).text( currentProgress + "%" );
        }
      });

      // 模拟进度条动态变化 (1 秒内达到 100%)
      var progressBarValue = 0;
      var intervalId = setInterval( function() {
        progressBarValue++;
        progressbar.progressbar( "value", progressBarValue );
        if ( progressBarValue === 100 ) {
          clearInterval( intervalId );
        }
      }, 10 );
    });
  </script>
</body>
</html>

示例二 — 匹配品牌广告

该示例展示如何使用 change 事件来匹配品牌广告。在这个示例中，假设一个公司在制作广告并将其输出到网络页面上。当进度条到达某个特定的值时，我们将显示一个与品牌相匹配的广告。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
  <meta charset="utf-8">
  <title>jQuery UI 进度条示例</title>
  <style>
    #progressbar {
      position: relative;
      width: 80%;
      margin: 20px auto;
    }
    #output {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 50%;
      margin-left: -50px;
      backgroud-color: #EEE;
      border: 2px solid black;
      border-radius: 50%;
      top: 75px;
    }
  </style>
</head>
<body>
  <div id="progressbar"></div>
  <div id="output"></div>
  <script>
    $( function() {
      // 获取进度条元素
      var progressbar = $( "#progressbar" );

      // 初始化进度条并设置最大值为 100
      progressbar.progressbar({
        max: 100,
        value: 0, // 初始值为 0
        // 注册 change 事件
        change: function( event, ui ) {
          // 判断总进度（0~100）是否达到阈值
          if ( progressbar.progressbar( "value" ) >= 60 ) {
            // 如果达到阈值，则更换输出结果
            $( "#output" ).css( "background-color", "red" );
            $( "#output" ).text( "匹配的品牌广告" );
          } else {
            // 否则，恢复默认输出结果
            $( "#output" ).css( "background-color", "#EEE" );
            $( "#output" ).text( "" );
          }
        }
      });

      // 模拟进度条动态变化 (1 秒内达到 100%)
      var progressBarValue = 0;
      var intervalId = setInterval( function() {
        progressBarValue++;
        progressbar.progressbar( "value", progressBarValue );
        if ( progressBarValue === 100 ) {
          clearInterval( intervalId );
        }
      }, 10 );
    });
  </script>
</body>
</html>
Tags: