jQuery UI Progressbar create事件

jQuery UI Progressbar 是一款基于 jQuery UI 的插件，用于在网页中展现进度条。Progressbar 插件提供了一些事件，用于响应用户交互、调整进度条显示等。

其中，create 事件可以在进度条被创建时触发。本文将详细讲解 create 事件的用法。

使用方法

基本用法

要使用 create 事件，需要先创建 Progressbar 实例，并在创建实例时指定 create 事件的回调函数。例如：

$( "#progressbar" ).progressbar({
  create: function( event, ui ) {
    console.log( "Progressbar is created!" );
  }
});

上述代码中，我们在创建 Progressbar 实例时，在参数对象中指定了 create 事件的回调函数。这个回调函数会在进度条被创建时被调用，并接收两个参数：

• event：代表当次事件的事件对象，可以用来获取事件类型、触发元素等信息。
• ui：代表一个空白对象，用于兼容 jQuery UI 其他组件的事件。在 create 事件中，ui 对象为空白，没有任何有用的信息。

在上述示例中，我们只是简单地在控制台中打印了一条信息。实际应用中，create 事件可以用于更多需要在进度条创建时执行的操作。

绑定多个事件

在创建 Progressbar 实例时，我们还可以同时绑定多个事件。例如：

$( "#progressbar" ).progressbar({
  create: function( event, ui ) {
    console.log( "Progressbar is created!" );
  },
  complete: function( event, ui ) {
    console.log( "Progressbar is completed!" );
  }
});

上述代码中，我们绑定了 create 和 complete 两个事件。当进度条被创建时，会触发 create 事件，输出一条日志；当进度条完成时，会触发 complete 事件，输出另外一条日志。

注意事项

需要注意的是，create 事件只会在进度条创建时触发一次。如果我们在代码中修改了进度条的最大值或初始值等属性，不会再次触发 create 事件。如果我们需要在属性修改后执行特定的操作，可以使用其他事件，例如 change 事件。

示例说明

以下是两条 create 事件的示例说明。

示例一：修改进度条颜色

我们可以使用 create 事件，在进度条被创建时对其样式进行修改。例如，我们可以将进度条的默认颜色修改为蓝色：

$( "#progressbar" ).progressbar({
  create: function( event, ui ) {
    $( this ).find( ".ui-progressbar-value" ).css({
      "background-color": "blue"
    });
  }
});

上述代码中，我们在 create 事件中选择进度条本身（通过 this 获取），找到它的子元素 .ui-progressbar-value，并修改该元素的背景色为蓝色。这样，我们在创建进度条时，便修改了它的样式。

示例二：向服务器发送请求并更新进度条

在实际应用中，我们可能需要在进度条被创建时，向服务器发送请求，并根据服务器的响应来更新进度条。我们可以在 create 事件中使用 jQuery 的 ajax 函数发送请求，例如：

$( "#progressbar" ).progressbar({
  create: function( event, ui ) {
    var $progressbar = $( this );
    $.ajax({
      url: "/api/progress",
      method: "GET",
      dataType: "json",
      success: function( data ) {
        $progressbar.progressbar( "option", {
          value: data.percent
        });
      }
    });
  }
});

上述代码中，我们在 create 事件中使用 ajax 函数向服务器发送请求，获取进度条完成的百分比。在请求成功后，我们使用 $( this ) 获取进度条本身，再使用 value 方法将进度条的值设置为服务器返回的百分比。这样，我们便在进度条被创建时，向服务器发送了请求并更新了进度条的值。