jQuery UI Progressbar instance()方法

jQuery UI Progressbar是一个 jQuery UI 提供的进度条组件，可以用来呈现操作执行的进度以及剩余量情况。而 instance() 方法则可用于获取进度条组件实例对象，方便在内部对进度条属性及方法进行调用。接下来，我们将详细说明该方法的使用和示例说明。

方法语法

$(selector).progressbar("instance")

参数说明：

selector：必选项，指定要获取进度条组件实例对象的选择器，可以是 ID、class 或标签名。

方法使用

在使用 instance() 方法之前，需要先通过 .progressbar() 方法将进度条组件初始化，否则会抛出 "cannot call methods on progressbar prior to initialization" 的错误。下面是一个初始化进度条组件，并使用 instance() 方法获取实例的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery UI Progressbar instance()方法示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <div id="progressbar"></div>

    <script>
        $(function() {
            $("#progressbar").progressbar({
                value: 20
            });
            var progressbar = $("#progressbar").progressbar("instance");
            console.log(progressbar);
        });
    </script>
</body>
</html>

上述示例中，首先使用 $("#progressbar").progressbar({value: 20}); 初始化一个进度条组件，该组件的默认值为 20。接着使用 $("#progressbar").progressbar("instance"); 获取该组件实例对象，并通过 console.log(progressbar); 打印对象，以便查看该对象及其属性、方法。

在控制台输出如下：

progressbar {
  pluginName: "progressbar",
  options: {…},
  namespace: "",
  element: jQuery.fn.init [div#progressbar, constructor: function, selector: "", …],
  uuid: 6, …}

在输出中，progressbar 对象包含了进度条组件的属性和方法，方便我们在 JavaScript 代码中对其进行操作。

除此之外，我们还可以通过 instance() 方法获取多个进度条组件实例，只需通过选择器指定相应的元素即可。

下面是一个示例，演示如何通过 class 获取多个进度条组件的实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery UI Progressbar instance()方法示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <div class="progressbar"></div>
    <div class="progressbar"></div>

    <script>
        $(function() {
            $(".progressbar").progressbar({
                value: 20
            });
            var progressbars = $(".progressbar").map(function() {
              return $(this).progressbar("instance");
            });
            console.log(progressbars);
        });
    </script>
</body>
</html>

上述示例中，首先在 body 中创建了两个 class 为 progressbar 的 div 元素，然后使用 $(".progressbar").progressbar({value: 20}); 初始化了两个进度条组件。接着使用 .map() 方法获取所有 class 为 progressbar 的 div 元素的进度条组件实例，并通过 console.log(progressbars); 方法将这些实例对象输出至控制台。

在控制台输出如下：

[progressbar, progressbar]

我们可以看到输出的数组中包含有两个 progressbar 对象，即对应两个 class 为 progressbar 的 div 元素的进度条组件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI Progressbar instance()方法 - Python技术站

jQuery UI Progressbar instance()方法

方法语法

方法使用

相关文章