jQuery UI サンプル -スピナー（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>

地図

Google マップの統合。スピナーを使用して緯度と経度を変更します。

<!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>

その他の拡張

jQuery UI テーマ

jQuery UI 部品ライブラリ

jQuery UI リファレンスマニュアル

jQuery UI インスタンス

jQuery UI サンプル -スピナー（Spinner）

デフォルト機能

通貨

小数

地図

オーバーフロー

時間