博客

jQuery UI progressbar enable() 方法

  • Post category:jquery

当使用jQuery UI的进度条（progressbar）时，通过调用enable()方法来启用进度条。下面是完整的攻略：

jQuery UI progressbar enable() 方法

方法描述

enable()方法用于启用受jQuery UI progressbar管理的进度条。如果进度条已经被禁用，调用此方法将启用它。

语法

$(selector).progressbar("enable");

其中，selector 是用于选中要启用的进度条的jQuery选择器。

示例

示例 1

下面的代码演示了如何在页面加载时启用一个jQuery UI进度条。

HTML代码：

<div id="progressbar"></div>

JavaScript代码：

$(function() {
    $("#progressbar").progressbar({
        value: 50,
        disabled: true // 进度条禁用
    });

    $("button").click(function() {
        $("#progressbar").progressbar("enable"); // 启用进度条
    });
});

在这个示例中，我们在页面加载时创建了一个jQuery UI进度条。禁用了它并在“启用”按钮被点击时启用它。点击“启用”按钮后，进度条就会开始工作了。

示例 2

下面的代码演示了如何使用进度条操作来启用一个jQuery UI进度条。

HTML代码：

<div id="progressbar"></div>
<button id="enable">启用进度条</button>
<button id="start" disabled>开始进度条</button>

JavaScript代码：

$(function() {
    var progressBar = $("#progressbar").progressbar({
        value: 0,
        disabled: true // 进度条禁用
    });

    $("#enable").click(function() {
        progressBar.progressbar("enable"); // 启用进度条
        $("#start").removeAttr("disabled"); // 启用进度条开始按钮
    });

    $("#start").click(function() {
        var value = 0;
        var interval = setInterval(function() {
            value += 5;
            progressBar.progressbar("value", value);

            if (value >= 100) {
                clearInterval(interval);
            }
        }, 500);
    });
});

在这个示例中，我们在页面上放置了两个按钮，一个用于启用进度条，另一个用于开始进度条。启用按钮被点击时，我们启用进度条并启用“开始”按钮。当“开始”按钮被点击时，进度条开始运作并每隔500毫秒增加5%的值，直到进度条的值达到100为止。

Tags: