阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery UI 实例 – 旋转器(Spinner)

      jQuery UI 实例 - 旋转器(Spinner)

      通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能。

      如需了解更多有关 spinner 部件的细节,请查看 API 文档旋转器部件(Spinner Widget)。

      默认功能

      默认的旋转器。

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery UI 旋转器(Spinner) - 默认功能</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
        <script>
        $(function() {
          var spinner = $( "#spinner" ).spinner();
       
          $( "#disable" ).click(function() {
            if ( spinner.spinner( "option", "disabled" ) ) {
              spinner.spinner( "enable" );
            } else {
              spinner.spinner( "disable" );
            }
          });
          $( "#destroy" ).click(function() {
            if ( spinner.data( "ui-spinner" ) ) {
              spinner.spinner( "destroy" );
            } else {
              spinner.spinner();
            }
          });
          $( "#getvalue" ).click(function() {
            alert( spinner.spinner( "value" ) );
          });
          $( "#setvalue" ).click(function() {
            spinner.spinner( "value", 5 );
          });
       
          $( "button" ).button();
        });
        </script>
      </head>
      <body>
       
      <p>
        <label for="spinner">选择一个值:</label>
        <input id="spinner" name="value">
      </p>
       
      <p>
        <button id="disable">切换禁用/启用</button>
        <button id="destroy">切换部件</button>
      </p>
       
      <p>
        <button id="getvalue">获取值</button>
        <button id="setvalue">设置值为 5</button>
      </p>
       
       
      </body>
      </html>
      

      货币

      本实例是一个捐款表格,带有货币选择和数量旋转器。

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery UI 旋转器(Spinner) - 货币</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
        <script>
        $(function() {
          $( "#currency" ).change(function() {
            $( "#spinner" ).spinner( "option", "culture", $( this ).val() );
          });
       
          $( "#spinner" ).spinner({
            min: 5,
            max: 2500,
            step: 25,
            start: 1000,
            numberFormat: "C"
          });
        });
        </script>
      </head>
      <body>
       
      <p>
        <label for="currency">要捐款的货币</label>
        <select id="currency" name="currency">
          <option value="en-US">US $</option>
          <option value="de-DE">EUR €</option>
          <option value="ja-JP">YEN ¥</option>
        </select>
      </p>
      <p>
        <label for="spinner">要捐款的数量:</label>
        <input id="spinner" name="spinner" value="5">
      </p>
      </body>
      </html>
      

      小数

      本实例是一个小数旋转器。增量设置为 0.01。处理文化变化的代码会读取当前的选择器的值,当改变文化时,会基于新的文化重新设置值的样式。

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery UI 旋转器(Spinner) - 小数</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.ja-JP.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
        <script>
        $(function() {
          $( "#spinner" ).spinner({
            step: 0.01,
            numberFormat: "n"
          });
       
          $( "#culture" ).change(function() {
            var current = $( "#spinner" ).spinner( "value" );
            Globalize.culture( $(this).val() );
            $( "#spinner" ).spinner( "value", current );
          });
        });
        </script>
      </head>
      <body>
       
      <p>
        <label for="spinner">小数旋转器:</label>
        <input id="spinner" name="spinner" value="5.06">
      </p>
      <p>
        <label for="culture">选择一种用于格式化的文化:</label>
        <select id="culture">
          <option value="en-EN" selected="selected">English</option>
          <option value="de-DE">German</option>
          <option value="ja-JP">Japanese</option>
        </select>
      </p>
      </body>
      </html>
      

      地图

      谷歌地图集成,使用旋转器来改变纬度和经度。

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery UI 旋转器(Spinner) - 地图</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
        <script>
        $(function() {
          function latlong() {
            return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
          }
          function position() {
            map.setCenter( latlong() );
          }
          $( "#lat, #lng" ).spinner({
            step: .001,
            change: position,
            stop: position
          });
       
          var map = new google.maps.Map( $("#map")[0], {
            zoom: 8,
            center: latlong(),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
        });
        </script>
        <style>
        #map {
          width:500px;
          height:500px;
        }
        </style>
      </head>
      <body>
       
      <label for="lat">纬度</label>
      <input id="lat" name="lat" value="44.797">
      <br>
      <label for="lng">经度</label>
      <input id="lng" name="lng" value="-93.278">
       
      <div id="map"></div>
      </body>
      </html>
      

      溢出

      溢出旋转器限制范围从 -10 到 10。对于 10 以上的值,会溢出到 -10,反之亦然。

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery UI 旋转器(Spinner) - 溢出</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
        <script>
        $(function() {
          $( "#spinner" ).spinner({
            spin: function( event, ui ) {
              if ( ui.value > 10 ) {
                $( this ).spinner( "value", -10 );
                return false;
              } else if ( ui.value < -10 ) {
                $( this ).spinner( "value", 10 );
                return false;
              }
            }
          });
        });
        </script>
      </head>
      <body>
       
      <p>
        <label for="spinner">选择一个值:</label>
        <input id="spinner" name="value">
      </p>
      </body>
      </html>
      

      时间

      一个扩展自旋转器的自定义部件。使用 全球化(Globalization)插件来解析和输出时间戳,带有自定义的 step 和 page 选项。向上/向下光标用于分钟的递增/递减,向上/向下翻页用于小时的递增/递减。

      <!doctype html>
      <html>
      <head>
        <meta charset="utf-8">
        <title>jQuery UI 旋转器(Spinner) - 时间</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
        <script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
        <script>
        $.widget( "ui.timespinner", $.ui.spinner, {
          options: {
            // 秒
            step: 60 * 1000,
            // 小时
            page: 60
          },
       
          _parse: function( value ) {
            if ( typeof value === "string" ) {
              // 已经是一个时间戳
              if ( Number( value ) == value ) {
                return Number( value );
              }
              return +Globalize.parseDate( value );
            }
            return value;
          },
       
          _format: function( value ) {
            return Globalize.format( new Date(value), "t" );
          }
        });
       
        $(function() {
          $( "#spinner" ).timespinner();
       
          $( "#culture" ).change(function() {
            var current = $( "#spinner" ).timespinner( "value" );
            Globalize.culture( $(this).val() );
            $( "#spinner" ).timespinner( "value", current );
          });
        });
        </script>
      </head>
      <body>
       
      <p>
        <label for="spinner">时间旋转器:</label>
        <input id="spinner" name="spinner" value="08:30 PM">
      </p>
      <p>
        <label for="culture">选择一种用于格式化的文化:</label>
        <select id="culture">
          <option value="en-EN" selected="selected">English</option>
          <option value="de-DE">German</option>
        </select>
      </p>
      </body>
      </html>
      
      目录
      目录