JqueryUI - 微调器小部件

Spinner 小部件在输入框的左侧添加一个向上/向下箭头，从而允许用户增加/减少输入框中的值。 它允许用户直接键入一个值，或通过旋转键盘、鼠标或滚轮来修改现有值。 它还具有跳过值的步骤功能。 除了基本的数字功能外，它还启用了全球化的格式选项（即货币、千位分隔符、小数等），从而提供了一个方便的国际化屏蔽输入框。

以下示例依赖于 Globalize。 您可以从 https://github.com/jquery/globalize 获取 Globalize 文件。单击releases 链接，选择所需的版本，然后下载.zip 或tar.gz 文件。 提取文件并将以下文件复制到您的示例所在的文件夹中。

• lib/globalize.js :此文件包含用于处理本地化的 Javascript 代码

• lib/globalize.culture.js :此文件包含 Globalize 库附带的一整套语言环境。

这些文件也存在于您的 jquery-ui 库的 external 文件夹中。

jQueryUI 提供了 spinner() 方法来创建一个微调器。

语法

The spinner() method can be used in two forms −

• $(selector, context).spinner (options) 方法

• $(selector, context).spinner ("action", params) 方法

$ (selector, context).spinner (options) 方法

spinner (options) 方法声明 HTML 元素及其内容应作为微调器处理和管理。 options 参数是一个对象，它指定所涉及的微调器元素的外观和行为。

语法

$(selector, context).spinner (options);

您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −

$(selector, context).spinner({option1: value1, option2: value2..... });

下表列出了可与此方法一起使用的不同选项 −

$( ".selector" ).spinner(
   { culture: "fr" }
);

$( ".selector" ).spinner(
   { disabled: true }
);

$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);

$( ".selector" ).spinner(
   { incremental: false }
);

$( ".selector" ).spinner(
   { max: 50 }
);

$( ".selector" ).spinner(
   { min: 0 }
);

$( ".selector" ).spinner(
   { numberFormat: "n" }
);

$( ".selector" ).spinner(
   { page: 5 }
);

以下部分将向您展示微调器小部件功能的一些工作示例。

默认功能

以下示例演示了微调器小部件功能的一个简单示例，不向 spinner() 方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-1" value = "0" />
      </div>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

最小值、最大值和步长选项的使用

以下示例演示了三个选项min、max 和step 在JqueryUI 的spinner widget 中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -10, 
               max: 10
            });
            $('#spinner-3').spinner({
               step: 100, 
               min: -1000000, 
               max: 1000000
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         Spinner Min, Max value set:
         <input type = "text" id = "spinner-2" value = "0" /><br><br>
         Spinner increments/decrements in step of of 100:
         <input type = "text" id = "spinner-3" value = "0" />
      </div>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

在上面的示例中，您可以在第一个微调器中看到最大值和最小值分别设置为 10 和 -10。 因此，越过这些值，微调器将停止递增/递减。 在第二个微调器中，微调器值以 100 为步长递增/递减。

图标选项的使用

以下示例演示了选项 icons 在 JqueryUI 的微调器小部件中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-5 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-5" ).spinner({
               icons: {
                  down: "custom-down-icon", up: "custom-up-icon"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-5" value = "0" />
      </div>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

在上面的示例中，您会注意到图像微调器发生了变化。

使用 culture、numberFormat 和 page 选项

以下示例演示了三个选项 culture、numberFormat 和 page 在 JqueryUI 的微调控件中的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
      
      <script>
         $(function() {
            $( "#spinner-4" ).spinner({
               culture:"de-DE",
               numberFormat:"C",
               step:2,
               page:10
            });
         });
      </script>
   </head>
   
   <body>
      <p>
         <label for = "spinner-4">Amount to donate:</label>
         <input id = "spinner-4" name = "spinner" value = "5">
      </p>
     
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

在上面的示例中，您可以看到微调器以货币格式显示数字，因为 numberFormat 设置为"C"且 culture 设置为"de-DE"。 这里我们使用了 jquery-ui 库中的 Globalize 文件。

$ (selector, context).spinner ("action", params) 方法

spinner ("action", params) 方法可以对微调器元素执行操作，例如启用/禁用微调器。 该操作在第一个参数中指定为字符串（例如，"disable"禁用微调器）。 在下表中检查可以通过的操作。

语法

$(selector, context).spinner ("action", params);;

下表列出了可与此方法一起使用的不同actions操作 −

$(".selector").spinner("destroy");

$(".selector").spinner("disable");

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

var isDisabled = $( ".selector" ).spinner( "option", "disabled" );

var options = $( ".selector" ).spinner( "option" );

$( ".selector" ).spinner( "option", "disabled", true );

$(".selector").spinner("option", { disabled: true });

$(".selector").spinner("pageDown");

$(".selector").spinner("pageUp");

$(".selector").spinner("stepDown");

$(".selector").spinner("stepUp");

var value = $( ".selector" ).spinner( "value" );

$( ".selector" ).spinner( "value", 50 );

$( ".selector" ).spinner( "widget");

以下示例演示如何使用上表中给出的操作。

stepUp、stepDown、pageUp 和 pageDown 操作的使用

以下示例演示了stepUp、stepDown、pageUp 和pageDown 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-6 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-6" />
      <br/>
      <button id = "stepUp-2">Increment</button>
      <button id = "stepDown-2">Decrement</button>
      <button id = "pageUp-2">Increment Page</button>
      <button id = "pageDown-2">Decrement Page</button>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出 −

在上面的示例中，使用相应的按钮来增加/减少微调器。

启用和禁用动作的使用

下面的例子演示了enable 和disable 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-7 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-7" />
      <br/>
      <button id = "stepUp-3">Enable</button>
      <button id = "stepDown-3">Disable</button>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −

在上面的示例中，使用 Enable/Disable (启用/禁用)按钮来启用或禁用微调器。

Spinner 元素的事件管理

除了我们在前面部分看到的微调器（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});

$( ".selector" ).spinner({
   start: function( event, ui ) {}
});

$( ".selector" ).spinner({
   stop: function( event, ui ) {}
});

示例

以下示例演示了微调器小部件中的事件方法用法。 此示例演示了事件 spin、change 和 stop 的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-8 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-8" ).spinner({
               spin: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
               },
               change: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
               },
               stop: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-8" value = "0" />
      </div>
      <span id = "result-2"></span>
   </body>
</html>

让我们将上面的代码保存在一个 HTML 文件 spinnerexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −

在上面的示例中，更改微调器的值并查看下面显示的有关旋转和停止事件的消息。 现在更改微调器的焦点，您会看到一条关于更改事件的消息。

扩展点

微调器小部件是使用小部件工厂构建的，可以扩展。 要扩展小部件，我们可以覆盖或添加现有方法的行为。以下方法作为扩展点提供了与旋转器方法相同的 API 稳定性。 在上表中列出。

_buttonHtml: function() {
  return "" +
    "" +
      "▲" +
    "" +
    "" +
      "▼" +
    "";
}

_uiSpinnerHtml: function() {
  return "
";
}

jQuery UI Widget Factory 是一个可扩展的基础，所有 jQuery UI 的小部件都是基于它构建的。 使用小部件工厂构建插件为状态管理提供了便利，并为常见任务（如在实例化后公开插件方法和更改选项）提供了约定。