Spinner | jQuery UI 1.10 日本語リファレンス

Spinner 1.9 追加

http://api.jqueryui.com/1.10/spinner/

テキストフィールド要素を数値入力用に、増減ボタンが組み込まれたものに拡張します。

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Spinner - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/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 lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Spinner - Currency</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="/resources/demos/external/globalize.js"></script>
  <script src="/resources/demos/external/globalize.culture.de-DE.js"></script>
  <script src="/resources/demos/external/globalize.culture.ja-JP.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/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>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Spinner - Decimal</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="/resources/demos/external/globalize.js"></script>
  <script src="/resources/demos/external/globalize.culture.de-DE.js"></script>
  <script src="/resources/demos/external/globalize.culture.ja-JP.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/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">英語</option>
    <option value="de-DE">ドイツ</option>
    <option value="ja-JP">日本</option>
  </select>
</p>


</body>
</html>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Spinner - Map</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/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>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Spinner - Overflow</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/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>

<!doctype html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Spinner - Time</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="/resources/demos/external/jquery.mousewheel.js"></script>
  <script src="/resources/demos/external/globalize.js"></script>
  <script src="/resources/demos/external/globalize.culture.de-DE.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>
  $.widget( "ui.timespinner", $.ui.spinner, {
    options: {
      // seconds
      step: 60 * 1000,
      // hours
      page: 60
    },

    _parse: function( value ) {
      if ( typeof value === "string" ) {
        // already a timestamp
        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">英語</option>
    <option value="de-DE">ドイツ</option>
  </select>
</p>


</body>
</html>

スピナーは様々な種類の数値を扱うウィジットです。このウィジット上で、ユーザーからの直接な数値入力、また既に入力されている値をキーボードやマウス、スクロール操作によって変更することが出来るようになっています。グローバル情報と連結することで、通貨とロケール日付を操作できるようになります。スピナーはテキストフィールドをラップし、値を増減する2つのボタンを付与し、それに合わせたキーボード操作機能も提供します。グローバル情報に数字フォーマットと解析を委任します。

キーボード操作のサポートについて

テキストフィールドがフォーカスされている場合、またはボタンの操作後に下記のキーコマンドが利用可能なります。

[↑]: 値を1ステップ分増加します。
[↓]: 値を1ステップ分減少します。
PAGE UP: 値を1ページ分増加します。
PAGE DOWN: 値を1ページ分減少します。

スピナーはいくつかの機能的なCSSを必要とします。このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。

依存関係

UI Core(jquery.ui.core.js)
Widget Factory
Button
Globalize(cultureとnumberFormatオプションで使用)

オプション	説明
culture	型：`String` 初期値：`null` 値を解析、フォーマットするために使用する文化形式を指定します。 nullの場合は現在設定されている形式を採用します。使用可能な文化形式は、こちらの jquery / globalize / culuture を参照してください。 numberFormatオプションが設定されている場合のみ、上記ファイルの読み込みが必要になります。
disabled	型：`Boolean` 初期値：`false` trueを指定すると、スピナーを無効化します。
icons	型：`Object` 初期値：`{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }` 2つのボタンに適用するアイコンを指定します。アイコンの詳細はjQuery UI アイコン一覧を参照してください。
incremental	型:`Boolean` or `Function()` 初期値:`true` ボタンを押した際に取得するステップ数を制御します。 Boolean trueをセットすると、増減の操作をし続けると増減のステップ数がそれに応じて変化します。 falseを設定すると、増減のステップ数は常に一定です。 Function() この関数は発生したスピンの数を取得します。戻り値として現在のスピンによって増減するステップ数を返さなければいけません。
max	型:`Number` or `String` 初期値:`null` 最大許容値です。これが存在していて、オプションが明示的に設定されていない場合は、要素のmax属性が使用されます。 nullの場合、最大値は制限されません。 Number 設定する最大値を指定します。 String jquery / globalize / culuture のファイルが読み込まれていれば、このオプション値はnumberFormatとcultureのオプションに基づいて解析された文字列を渡すことが出来ます。そうでなければ、parseFloat()メソッドによってフォールバックされた値になります。
min	型:`Number` or `String` 初期値:`null` 最小許容値です。これが存在していて、オプションが明示的に設定されていない場合は、要素のmin属性が使用されます。 nullの場合、最小値は制限されません。 Number 設定する最小値を指定します。 String jquery / globalize / culuture のファイルがが読み込まれていれば、このオプション値はnumberFormatとcultureのオプションに基づいて解析された文字列を渡すことが出来ます。そうでなければ、parseFloat()メソッドによってフォールバックされた値になります。
numberFormat	型:`String` 初期値:`null` グルーバル情報によって渡される数値フォーマットです。もっとも一般的な値は"n"の10進数で、他に"C"の通貨があります。また、cultureオプションについても確認してください。
page	型:`Number` 初期値:`10` pageUp/pageDownメソッドによってページング処理をされた際に、いくつステップを進めるのかを指定します。
step	型:`Number` or `String` 初期値:`1` Number 1ステップの数を指定します。 String ( jquery / globalize / culuture ) のファイルが読み込まれていれば、このオプション値はnumberFormatとcultureのオプションに基づいて解析された文字列を渡すことが出来ます。そうでなければ、parseFloat()メソッドによってフォールバックされた値になります。増減ボタン、またはstepUp()/stepDown()のメソッドが実行された際に、数値をいくつ増減するか指定します。これが存在していて、オプションが明示的に設定されていない場合は、要素のstep属性(HTML5で追加された属性)が使用されます。

メソッド	説明
destroy()	スピナーの機能を完全に削除します。 `$( ".selector" ).spinner( "destroy" );`
disable()	スピナーを無効化します。
enable()	スピナーを有効にします。
option( optionName )	戻り値：`Object` optionNameに指定したオプションの現在の値を取得します。 optionName 型：`String` 取得したいオプションの名前を指定します。
option()	戻り値：`PlainObject` オプションの各キーと値がペアとなったオブジェクトを返します。
option( optionName, value )	引数のoptionNameのオプションに値を設定します。 optionName 型：`String` 設定したいオプションの名前を指定します。 value 型：`Object` 設定したい値を指定します。
option( options )	オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。 option 型：`Object` 設定したいオプションのキーと名前のペアを指定します。
pageDown( [pages ] )	pages 型:`Number` 減少するページ数を指定します。未指定ならば、1になります。 pageオプションによって定義されたページ値分を減少させます。引数が未指定であれば1ページ分の減少とみなされます。
pageUp( [pages ] )	pages 型:`Number` 増加するページ数を指定します。未指定ならば、1になります。 pageオプションによって定義されたページ値分を増加させます。引数が未指定であれば1ページ分の増加とみなされます。
stepDown( [steps ] )	steps 型:`Number` 減少するステップ数を指定します。未指定ならば、1になります。指定されたsteps分の値を減少させます。引数が未指定であれば1ステップ分の減少とみなされます。もし、結果がmaxより多い、minより少ない、ステップと整合性がとれていない等の場合は、一番近い値に最適化されます。
stepUp( [steps ] )	steps 型:`Number` 増加するステップ数を指定します。未指定ならば、1になります。指定されたsteps分の値を増加させます。引数が未指定であれば1ステップ分の増加とみなされます。もし、結果がmaxより多い、minより少ない、ステップと整合性がとれていない等の場合は、一番近い値に最適化されます。
value( )	現在の値を取得します。この値はnumberFormatとcultureオプションをベースに解析された値になります。
value( value )	value 型:`Number` or `String` 設定したい値を指定します。任意の値を設定します。この値はnumberFormatとcultureオプションをベースに解析された値になります。
widget()	戻り値：`Object` スピナーを含めたjQueryオブジェクトを返します。

イベント	説明
change( event, ui )	型：`spinchange` スピナーの値が変更され、且つフォーカスを失った際にトリガされます。 `$( ".selector" ).spinner({ change: function( event, ui ) {} });` `$( ".selector" ).on( "spinchange", function( event, ui ) {} );`
create( event, ui )	型：`menucreate` スピナーが生成された際にトリガされます。
spin( event, ui )	型：`spin` スピナーの増減操作をしている間、トリガされます。イベントをキャンセルすると、値の更新処理を取り消す事ができます。 ui.value 型:`Number` イベントがキャンセルされなければ、設定された新しい値を取得します。
start( event, ui )	型：`slidestart` ユーザーがスピン操作を始める直前際にトリガされます。イベントがキャンセルされると、スピンが発生しなくなります。
stop( event, ui )	型：`slidestop` ユーザーのスピン操作の後にトリガされます。