jQuery UI API - スピナーウィジェット（Spinner Widget）

カテゴリ

ウィジェット（Widgets）

使用法

説明：上/下ボタンと矢印キーで操作することにより、数値入力のためのテキスト入力機能を強化します。

追加バージョン：1.9

スピナー（Spinner）、または数値ステッパーウィジェット（number stepper widget）は、さまざまな数値入力を処理するのに最適なコントロールです。ユーザーは値を直接入力するか、キーボード、マウス、スクロールホイールの回転によって既存の値を変更できます。グローバライズ（Globalize）と組み合わせると、地域ごとの通貨や日付を回転表示することもできます。

スピナー（Spinner）は、2つのボタンを使用してテキスト入力を現在の値の増分値と減分値で上書きします。スピナーはキーイベントを追加し、同じ増分と減分をキーボードで実行できるようにします。スピナーはグローバライズ（Globalize）の数値フォーマットと解析を表します。

キーボード操作

  • UP：値を1ステップ増加させます。
  • DOWN：値を1ステップ減少させます。
  • PAGE UP：値を1ページ分増加させます。
  • PAGE DOWN：値を1ページ分減少させます。

マウスでスピンボタンをクリックした後も、フォーカスはテキストフィールドに残ります。

スピナーが読み取り専用でない場合（<input readonly>）には、ユーザーは値を入力でき、無効な値（最小値未満、最大値超過、増減の不一致、数値以外の入力）が生成される可能性があります。増減時には、プログラムによる操作かスピナーボタンによる操作かに関係なく、値は有効な値に強制されます（詳細については、stepUp()とstepDown()の説明を参照してください。

テーマ化

スピナーウィジェット（Spinner Widget）はjQuery UI CSS フレームワークを使用して、その外観と感触のスタイルを定義します。スピナー固有のスタイルが必要な場合は、以下の CSS クラス名を使用できます：

  • ui-spinner：スピナーの外側のコンテナ。
    • ui-spinner-input：スピナーウィジェット（Spinner Widget）がインスタンス化される<input>要素。
    • ui-spinner-button：スピナーの値を増減させるためのボタンコントロール。上ボタンにはさらにui-spinner-upclass が付き、下ボタンにはさらにui-spinner-down class。

依存関係

補足説明

  • このウィジェットは機能的なCSSを必要とし、これがないと動作しません。カスタムテーマを作成する場合は、ウィジェット固有のCSSファイルを開始点として使用してください。
  • このウィジェットはプログラムによって要素の値を操作するため、要素の値が変更されてもネイティブのchangeイベントはトリガーされません。
  • 〜上ではサポートされていません<input type="number">スピナーを作成する場合、ネイティブスピナーのUIと競合するためです。

例

通常の数値スピナー。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>旋转器部件（Spinner Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<input id="spinner">
 
<script>
$( "#spinner" ).spinner();
</script>
 
</body>
</html>

その他の拡張