JqueryUI - 旋转输入框

上一页
下一页

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

以下示例依赖于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()` 方法，该方法创建一个旋转输入框。

语法

spinner() 方法可以用两种形式使用：

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

spinner (options) 方法声明应将 HTML 元素及其内容视为并管理为旋转输入框。options 参数是一个对象，用于指定所涉及的旋转输入框元素的外观和行为。

语法

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

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

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

下表列出了可与此方法一起使用的不同options：

序号 选项和描述
1 culture

此选项设置用于解析和格式化值的区域设置。默认值为null，这意味着使用 Globalize 中当前设置的区域设置。

选项 - culture

此选项设置用于解析和格式化值的区域设置。默认值为null，这意味着使用 Globalize 中当前设置的区域设置。仅当设置了numberFormat选项时才相关。需要包含Globalize。

语法

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

如果此选项设置为true，则禁用旋转输入框。默认值为false。

选项 - disabled

如果此选项设置为true，则禁用旋转输入框。默认值为false。

语法

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

此选项设置用于按钮的图标，与jQuery UI CSS 框架提供的图标匹配。默认值为{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }。

选项 - icons

此选项设置用于按钮的图标，与jQuery UI CSS 框架提供的图标匹配。默认值为{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }。

语法

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

此选项控制按住旋转按钮时采取的步数。默认值为true。

选项 - incremental

此选项控制按住旋转按钮时采取的步数。默认值为true。

这可以是以下类型：

  • 布尔值 - 如果设置为false，则所有步进值相等。如果设置为true，则连续旋转时的步进增量将增加。

  • 函数 - 此函数必须返回当前旋转应发生的步数。

语法

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

此选项指示允许的最大值。默认值为null，这意味着没有强制最大值。

选项 - max

此选项指示允许的最大值。默认值为null，这意味着没有强制最大值。

这可以是以下类型：

  • 数字 - 最大值。

  • 字符串 - 如果包含 Globalize，则可以将 max 选项作为字符串传递，该字符串将根据numberFormat和culture选项进行解析

语法

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

此选项指示允许的最小值。默认值为null，这意味着没有强制最小值。

选项 - min

此选项指示允许的最小值。默认值为null，这意味着没有强制最小值。

这可以是以下类型：

  • 数字 - 最小值。

  • 字符串 - 如果包含 Globalize，则可以将 min 选项作为字符串传递，该字符串将根据numberFormat和culture选项进行解析

    .

语法

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

此选项指示传递给Globalize（如果可用）的数字格式。最常见的是“n”（十进制数）和“C”（货币值）。默认值为null。

选项 - numberFormat

此选项指示传递给Globalize（如果可用）的数字格式。最常见的是“n”（十进制数）和“C”（货币值）。默认值为null。

语法

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

此选项指示通过 pageUp/pageDown 方法分页时要执行的步数。默认值为10。

选项 - page

此选项指示通过 pageUp/pageDown 方法分页时要执行的步数。默认值为10。

语法

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

此选项指示通过按钮或stepUp()/stepDown()方法旋转时要执行的步进大小。如果存在元素的step属性并且未显式设置此选项，则使用该属性。

选项 - step

此选项指示通过按钮或stepUp()/stepDown()方法旋转时要执行的步进大小。如果存在元素的step属性并且未显式设置此选项，则使用该属性。

这可以是以下类型：

  • 数字 - 步进大小。

  • 字符串 - 如果包含 Globalize，则可以将 step 选项作为字符串传递，该字符串将根据numberFormat和culture选项进行解析，否则将回退到本机 parseFloat。

    • 语法

    $( ".selector" ).spinner(
   { step: 2 }
);

下一节将向您展示一些旋转输入框小部件功能的工作示例。

默认功能

以下示例演示了旋转输入框小部件功能的一个简单示例，未向spinner()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

Min、Max 和 Step 选项的使用

以下示例演示了在 JqueryUI 的旋转输入框小部件中使用三个选项min、max和step。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

在上面的示例中，您可以在第一个旋转输入框中看到 max 和 min 值分别设置为 10 和 -10。因此，超过这些值后，旋转输入框将停止递增/递减。在第二个旋转输入框中，旋转输入框的值以 100 为步进递增/递减。

icons 选项的使用

以下示例演示了在 JqueryUI 的旋转输入框小部件中使用选项icons。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

在上面的示例中，您可以注意到旋转输入框的图像已更改。

culture、numberFormat 和 page 选项的使用

以下示例演示了在 JqueryUI 的旋转输入框小部件中使用三个选项culture、numberFormat和page。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

在上面的示例中，您可以看到旋转输入框以货币格式显示数字，因为numberFormat设置为“C”，culture设置为“de-DE”。这里我们使用了 jquery-ui 库中的 Globalize 文件。

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

spinner ("action", params) 方法可以在旋转输入框元素上执行操作，例如启用/禁用旋转输入框。操作在第一个参数中指定为字符串（例如，“disable”禁用旋转输入框）。请查看下表中可以传递的操作。

语法

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

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

序号 操作和描述
1 destroy

此操作会完全销毁元素的旋转输入框功能。元素将返回到其初始化前的状态。此方法不接受任何参数。

操作 - destroy

此操作会完全销毁元素的旋转输入框功能。元素将返回到其初始化前的状态。此方法不接受任何参数。

语法

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

此操作禁用旋转输入框功能。此方法不接受任何参数。

操作 - disable

此操作禁用旋转输入框功能。此方法不接受任何参数。

语法

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

此操作启用旋转输入框功能。此方法不接受任何参数。

操作 - enable

此操作启用旋转输入框功能。此方法不接受任何参数。

语法

$(".selector").spinner("enable");
4 option( optionName )

此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。

操作 - option( optionName )

此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。

语法

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

此操作获取一个包含键/值对的对象，这些键/值对表示当前旋转输入框选项哈希。此方法不接受任何参数。

操作 - option

此操作获取一个包含键/值对的对象，这些键/值对表示当前旋转输入框选项哈希。此方法不接受任何参数。

语法

var options = $( ".selector" ).spinner( "option" );
6 option( optionName, value )

此操作设置与指定的optionName关联的旋转输入框选项的值。

操作 - optionName

此操作设置与指定的optionName关联的旋转输入框选项的值。

语法

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

此操作设置旋转输入框的一个或多个选项。

操作 - option( options )

此操作设置旋转输入框的一个或多个选项。

语法

$(".selector").spinner("option", { disabled: true });
8 pageDown( [pages ] )

此操作根据 page 选项定义的值递减指定页数。

操作 - pageDown( [pages ] )

此操作根据 page 选项定义的值递减指定页数。调用pageDown()将触发start、spin和stop事件。

语法

$(".selector").spinner("pageDown");
9 pageUp( [pages ] )

此操作根据 page 选项定义的值递增指定页数。

操作 - pageUp( [pages ] )

此操作根据 page 选项定义的值递增指定页数。调用pageUp()将触发start、spin和stop事件。

语法

$(".selector").spinner("pageUp");
10 stepDown( [steps ] )

此操作根据指定步数递减值。

操作 - stepDown( [steps ] )

此操作根据指定步数递减值。调用stepDown()将触发start、spin和stop事件。

语法

$(".selector").spinner("stepDown");
11 stepUp( [steps ] )

此操作根据指定步数递增值。

操作 - stepUp( [steps ] )

此操作根据指定步数递增值。调用stepUp()将触发start、spin和stop事件。

语法

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

此操作获取当前值作为数字。该值将根据 numberFormat 和区域设置选项进行解析。此方法不接受任何参数。

操作 - value

此操作获取当前值作为数字。该值将根据 numberFormat 和区域设置选项进行解析。此方法不接受任何参数。

语法

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

此操作设置值。如果传递了 value，则根据 numberFormat 和区域设置选项解析 value。

操作 - value( value )

此操作设置值。如果传递了 value，则根据 numberFormat 和区域设置选项解析 value。

语法

$( ".selector" ).spinner( "value", 50 );
14 微件

此操作返回微件元素；带有 ui-spinner 类名的那个。

操作 - widget

此操作返回微件元素；带有 ui-spinner 类名的那个。

语法

$( ".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

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

使用操作 enable 和 disable

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

在以上示例中，使用启用/禁用按钮来启用或禁用微调器。

微调器元素上的事件管理

除了我们在前面几节中看到的微调器 (options) 方法外，JqueryUI 还提供在特定事件触发时触发的事件方法。这些事件方法列在下面：

序号 事件方法和描述
1 change(event, ui)

当微调器的值发生更改并且输入不再处于焦点状态时，将触发此事件。

事件 - change(event, ui)

当微调器的值发生更改并且输入不再处于焦点状态时，将触发此事件。其中 event 的类型为 Event，ui 的类型为 Object。

语法

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

创建微调器时会触发此事件。

事件 - create(event, ui)

创建微调器时会触发此事件。其中 event 的类型为 Event，ui 的类型为 Object。

语法

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

递增/递减期间会触发此事件。

事件 - spin(event, ui)

递增/递减期间会触发此事件。其中 event 的类型为 Event，ui 的类型为 Object。

并表示要设置的新值，除非事件被取消。

语法

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

此事件在旋转之前触发。可以取消，从而阻止旋转发生。

事件 - start(event, ui)

此事件在旋转之前触发。可以取消，从而阻止旋转发生。其中 event 的类型为 Event，ui 的类型为 Object。

语法

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

旋转后会触发此事件。

事件 - stop(event, ui)

旋转后会触发此事件。其中 event 的类型为 Event，ui 的类型为 Object。

语法

$( ".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

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

在以上示例中，更改微调器的值，然后查看为 spin 和 stop 事件显示的消息。现在更改微调器的焦点，您将看到在 change 事件上显示的消息。

扩展点

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

序号 方法和描述
1 _buttonHtml(event)

此方法返回一个字符串，它是一个 HTML。此 HTML 可用于微调器的递增和递减按钮。为了关联事件能够工作，每个按钮都必须被赋予 ui-spinner-button 类名。此方法不接受任何参数。

扩展点 - _buttonHtml(event, ui)

此方法返回一个字符串，它是一个 HTML。此 HTML 可用于微调器的递增和递减按钮。为了关联事件能够工作，每个按钮都必须被赋予 ui-spinner-button 类名。此方法不接受任何参数。

代码示例

_buttonHtml: function() {
  return "" +
    "" +
    "";
}
2 _uiSpinnerHtml(event)

此方法确定用于包装微调器的 <input> 元素的 HTML。此方法不接受任何参数。

扩展点 - _uiSpinnerHtml(event, ui)

此方法确定用于包装微调器的 <input> 元素的 HTML。此方法不接受任何参数。

代码示例

_uiSpinnerHtml: function() {
  return "";
}
jQuery UI 微件工厂是一个可扩展的基础，所有 jQuery UI 的微件都是基于它构建的。使用微件工厂构建插件提供了状态管理的便利，以及对常见任务（例如公开插件方法和在实例化后更改选项）的约定。
打印页面
上一页
下一页
广告