3-8 微调按钮插件——spinner
本节编程练习不计算学习进度，请电脑登录imooc.com操作

微调按钮插件——spinner

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

$(selector).spinner({options});

selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

例如，将页面中的三个输入文本框都与微调插件相绑定，当改变三个文本框值时，对应的<div>元素的背景色也将随之发生变化，如下图所示：

在浏览器中显示的效果：

从图中可以看出，由于三个文本框输入元素都绑定微调插件，因此，无论是点击右侧的上下按钮，还是直接在文本框中输入值，都可以改变<div>元素的背景色。

任务

我来试试，亲自将文本框与微调插件相绑定，将改变<div>元素的背景色

在下列代码的第27行，将输入文本框与微调插件相绑定，并调用插件的spinner()方法，动态改变<div>元素显示的背景色。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>微调按钮插件</title>
  5.         <link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  8.         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <div id="divtest">
  13.             <div class="title">
  14.                 选择颜色值</div>
  15.             <div class="content">
  16.                 <span id="spnColor" class="input fl">
  17.                     <input />
  18.                 </span>
  19.                 <span id="spnPrev" class="prev fr"></span>
  20.             </div>
  21.         </div>
  22.  
  23.         <script type="text/javascript">
  24.             $(function () {
  25.                 //定义变量
  26.                 var intR = 0, intG = 0, intB = 0, strColor;
  27.                 ?({
  28.                     //初始化插件
  29.                     max: 10,
  30.                     min: 0,
  31.                     //设置微调按钮递增/递减事件
  32.                     spin: function (event, ui) {
  33.                         if (ui.value == 8)
  34.                             spnPrev.style.backgroundColor = "red";
  35.                         else
  36.                             spnPrev.style.backgroundColor = "green";
  37.                     },
  38.                     //设置微调按钮值改变事件
  39.                     change: function (event, ui) {
  40.                         var intTmp = $(this).spinner("value");
  41.                         if (intTmp < 0) $(this).spinner("value", 0);
  42.                         if (intTmp > 10) $(this).spinner("value", 10);
  43.                         if (intTmp == 8)
  44.                             spnPrev.style.backgroundColor = "red";
  45.                         else
  46.                             spnPrev.style.backgroundColor = "green";
  47.                     }
  48.                 });
  49.             });
  50.         </script>
  51.     </body>
  52. </html>
  1. #divtest
  2. {
  3.     font-size: 62.5%;
  4.     width: 382px;
  5. }
  6. #divtest .title
  7. {
  8.     padding: 8px;
  9.     background-color: Blue;
  10.     color: #fff;
  11.     height: 23px;
  12.     line-height: 23px;
  13.     font-size: 15px;
  14.     font-weight: bold;
  15. }
  16. #divtest .content
  17. {
  18.     padding: 8px 0px;
  19.     background-color: #fff;
  20.     font-size: 13px;
  21. }
  22. #divtest .content .input
  23. {
  24.     width: 120px;
  25. }
  26. #divtest .content .prev
  27. {
  28.     width: 100px;
  29.     height: 70px;
  30.     border: solid 1px #ccc;
  31. }
  32. .fl
  33. {
  34.     float: left;
  35. }
  36. .fr
  37. {
  38.     float: right;
  39. }
下一节