jQuery UI スピナー（Spinner）

jQuery UI スピナー - 数値入力の精度向上

jQuery UI スピナーは、Web フォームに直感的なユーザーインターフェースを提供し、数値の増減を容易にする強力なツールです。従来のテキスト入力フィールドに別れを告げ、スピナーを使用すると、ユーザーは上下の矢印をクリックするか、マウスホイールを使用して数値を正確に調整できるため、ユーザーエクスペリエンスが向上します。

スピナーの機能

1. 数値の増減

スピナーコントロールの上下矢印をクリックするか、マウスホイールを使用すると、数値を簡単に増減できます。

2. ステップ制御

クリックまたはスクロールするたびに数値が変化する幅を設定して、さまざまな精度要件を満たすことができます。

3. 最大値と最小値の制限

数値の上限と下限を設定して、入力の有効性を確保できます。

4. カスタムフォーマット

通貨記号やパーセント記号などの数値の表示形式をカスタマイズできます。

スピナーの適用シナリオ

  • EコマースWebサイト：商品の数量選択、価格のフィルタリングなどに使用されます。
  • フォームの入力：年齢、日付、時間などの数値入力に使用されます。
  • データの視覚化：チャートパラメータの動的な調整、データ範囲のフィルタリングなどに使用されます。

スピナーのクイックスタート

1. jQuery UI ライブラリを含める

HTML ページに jQuery と jQuery UI ライブラリファイルを含めます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

2. スピナー要素を作成する

<input type="number"> 要素を使用してスピナーコントロールを作成します。


<input type="number" id="spinner">

3. スピナーを初期化する

$( "#spinner" ).spinner(); コードを使用してスピナープラグインを初期化します。


<script>
  $(document).ready(function(){
    $( "#spinner" ).spinner();
  });
</script>

スピナーの高度な使用方法

1. イベントリスニング

spin、change などのスピナーのさまざまなイベントをリッスンして、より複雑なインタラクションロジックを実現します。


$( "#spinner" ).spinner({
  spin: function( event, ui ) {
    // イベントハンドラ
  },
  change: function( event, ui ) {
    // イベントハンドラ
  }
});

2. メソッドの呼び出し

value()、step() などのスピナーによって提供されるメソッドを使用して、スピナーの動作を動的に制御します。


// 現在の値を取得する
var currentValue = $( "#spinner" ).spinner( "value" );

// ステップ値を設定する
$( "#spinner" ).spinner( "option", "step", 0.5 );

3. テーマスタイル

jQuery UI のテーマメカニズムを使用して、スピナーの外観を簡単にカスタマイズします。

詳細については、jQuery UI スピナーの公式ドキュメントを参照してください：https://api.jqueryui.com/spinner/

Q&A

1. スピナーの値を取得するにはどうすればよいですか？

$( "#spinner" ).spinner( "value" ); を使用してスピナーの値を取得できます。

2. スピナーのステップ値を変更するにはどうすればよいですか？

$( "#spinner" ).spinner( "option", "step", 0.5 ); を使用してスピナーのステップ値を変更できます。

3. スピナーにカスタムフォーマットを適用するにはどうすればよいですか？

numberFormat オプションを使用してスピナーにカスタムフォーマットを適用できます。詳細については、jQuery UI スピナーのドキュメントを参照してください。