jQuery UI Spinner 


jQuery UI微调器

jQuery UI旋转器小部件用于在输入框中添加向上/向下箭头,从而允许用户增加和减小输入框中的值。它使用户可以直接键入值,或通过使用键盘,鼠标或滚轮旋转来修改现有值。

它还具有一些扩展功能,例如:

  • 它有助于您跳过值。
  • 它还启用了全球化的格式设置选项(即货币,小数,千位分隔符等)。

句法:

您可以使用两种形式的spinner()方法:

$(selector, context).spinner (options) Method
$(selector, context).spinner ("action", params) Method

第一种方法

$(selector, context).spinner (options)

spinner(options)方法指定应将HTML元素及其内容视为Spinner对待和管理。在这里?选项?参数是一个对象,用于指定所涉及的微调器元素的外观和行为。

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:

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

以下是可与该方法一起使用的不同选项的列表:

Option Description
culture This option sets the culture to use for parsing and formatting the value. By default its value is null which means the currently set culture in globalize is used.
disabled If you set this option to true, it disables spinner. By default its value is false.
icons This option is used to set icons to use for buttons, matching an icon provided by the jQueryUI CSS framework. By default its value is { down: “ui-icon-triangle-1-s”, up: “ui-icon-triangle-1-n” } .
incremental This option controls the number of steps taken when holding down a spin button. By default its value is true.
max This option is used to identify the maximum allowed value. By default its value is null which means there is no maximum enforced.
min This option is used to identify the minimum allowed value. By default its value is null which means there is no minimum enforced.
numberFormat This option specifies a format of numbers passed to globalize, if available. Most common are “n” for a decimal number and “c” for a currency value. By default its value is null.
page This option indicates the number of steps to take when paging via the pageup/pagedown methods. By default its value is 10.
step This option specifies the size of the step to take when spinning via buttons or via the stepup()/stepdown() methods. The element’s step attribute is used if it exists and the option is not explicitly set.

jQuery UI Spinner示例1

没有参数spinner()方法:

让我们以一个简单的示例来演示Spinner小部件功能,不将任何参数传递给spinner()方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="http://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>


jQuery UI Spinner示例2

使用最小,最大和步进选项:

让我们以一个示例来说明jQueryUI的微调小部件中选项min,max和step的用法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="http://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: -50, 
               max: 50
            });
            $('#spinner-3').spinner({
               step: 1000, 
               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 1000:
         <input type="text" id="spinner-3" value="0" />
      </div>
   </body>
</html>

第二种方法

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

微调器(“操作”,参数)方法用于对微调器元素执行操作,例如启用/禁用微调器。该动作在第一个参数中指定为字符串(例如,“ disable”禁用微调器)。

以下是可与该方法一起使用的不同操作的列表:

Action Description
destroy This action is used to destroy the spinner functionality of an element completely and the elements return to their pre-init state. This method does not accept any arguments.
disable This action is used to disable the spinner functionality. This method does not accept any arguments.
enable This action is used to enable the spinner functionality. This method does not accept any arguments.
option( optionName ) This action gets the value currently associated with the specified optionName. Here optionName is the name of the option to get.
option This action gets an object containing key/value pairs representing the current spinner options hash. This method does not accept any arguments.
option(optionName, value) This action sets the value of the spinner option associated with the specified optionName.
option(options) this action sets one or more options for the spinner.
pageDown( [pages ] ) This action decrements the value by the specified number of pages, as defined by the page option.
pageUp( [pages ] ) This action increments the value by the specified number of pages, as defined by the page option.
stepDown( [steps ] ) This action is used to decrement the value by the specified number of steps.
stepUp( [steps ] ) This action increments the value by the specified number of steps.
value This action gets the current value as a number. The value is parsed based on the numberFormat and culture options. This method does not accept any arguments.
value(value) This action is used to set the value.
widget This action is used to return the spinner widget element; the one annotated with the UI-spinner class name.

jQueryUI spinner()示例3

使用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="http://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>

jQueryUI spinner()示例4

使用动作启用和禁用:

让我们以一个示例来演示动作启用和禁用的用法:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Spinner functionality</title>
      <link href="http://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>

0



error: 内容受到保护 !!