jQuery UI Spinner

jQuery UI Spinner

jQuery UI Spinner小部件用于在输入框中添加向上/向下箭头,从而允许用户增大和减小输入框中的值。它使用户可以直接键入值,或通过使用键盘,鼠标或滚轮旋转来修改现有值。
它还具有一些扩展功能,例如:

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

语法:
您可以以两种形式使用spinner()方法:
 $(selector, context).spinner (options)
 $(selector, context).spinner ("action", params)

第一种方法

 $(selector, context).spinner (options)
spinner(选项)方法指定应将HTML元素及其内容视为spinner。options参数是一个对象,用于指定所涉及的微调器元素的外观和行为。
您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:
 $(selector, context).spinner ({option1: value1, option2: value2.....});
以下是可与该方法一起使用的不同选项的列表:
选项 说明
culture 此选项设置用于解析和格式化值的区域性。默认情况下,它的值为null,这表示使用当前在globalize中设置的区域性。
disabled 如果将此选项设置为true,它将禁用微调器。默认情况下,其值为false。
icons 此选项用于设置图标以用于按钮,与jQueryUI CSS框架提供的图标匹配。默认情况下,其值为{down: " ui-icon-triangle-1-s",up: " ui-icon-triangle-1-n"}。
incremental 此选项控制按住旋转按钮时采取的步骤数。默认情况下,其值为true。
max 此选项用于标识最大允许值。默认情况下,它的值为null,这意味着没有最大强制执行。
min 此选项用于标识最小允许值。默认情况下,其值为null,这表示没有最低强制要求。
numberFormat 此选项指定传递给全球化的数字格式(如果有)。最常见的是" n"代表十进制数字," c"代表货币值。默认情况下,其值为null。
page 此选项指示通过pageup/pagedown方法进行分页时要采取的步骤数。默认情况下,其值为10。
step 此选项指定通过按钮或通过stepup()/stepdown()方法旋转时要采取的步骤的大小。元素的step属性(如果存在)且未明确设置选项时使用。

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="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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

使用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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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)
spinner("action", params)方法用于对旋转器元素执行操作,例如启用/禁用旋转器。该操作在第一个参数中指定为字符串(例如,"disable"禁用spinner)。
以下是可与此方法一起使用的不同操作的列表:
动作 说明
destroy 此操作用于完全destroy元素的微调器功能,并且元素返回其预初始化状态。此方法不接受任何参数。
disable 此操作用于禁用微调器功能。此方法不接受任何参数。
enable 此操作用于启用微调器功能。此方法不接受任何参数。
option(optionName) 此操作获取当前与指定的optionName关联的值。这里的optionName是要获取的选项的名称。
option 此操作获取一个对象,该对象包含表示当前微调器选项哈希的键/值对。此方法不接受任何参数。
option(optionName,value) 此操作设置与指定的optionName关联的微调器选项的值。
option(options) 此操作为微调器设置一个或多个选项。
pageDown([pages]) 此操作按照页面选项的定义,将值减少指定的页面数。
pageUp([pages]) 此操作将按页面选项的定义将值增加指定的页面数。
stepDown([steps]) 此操作用于将值递减指定的步数。
stepUp([steps]) 此操作将值增加指定的步数。
value 此操作以数字形式获取当前值。该值基于numberFormat和区域性选项进行解析。此方法不接受任何参数。
value(value) 此操作用于设置值。
widget 此操作用于返回微调小部件元素;一个带有UI旋转器类名称的注释。

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="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://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>