jQueryのUI API - 回転子メンバー(スピナーウィジェット)
カテゴリ
使用法
説明:アップ/ダウン矢印ボタンやキー処理、テキスト入力機能を強化し、入力値。
新バージョン:1.9
回転子(スピナー)、またはステップ数を(数ステッパウィジェット)の制御は、様々なデジタル入力に最適な制御を処理するために使用されます。 ユーザが値を直接入力することができ、または、キーボードを介してマウスホイールを既存の値を変更するように回転します。 グローバル化(グローバル化)と組み合わせると、あなたも、異なる領域に表示通貨と日付を回転させることができます。
増分のテキスト範囲を入力して、現在の値をデクリメントする2つのボタンを使用して回転子(スピナー)。 あなたは同じインクリメントとデクリメントを実行するために、キーボードを使用できるように回転子がキーイベントを追加します。 回転子代表グローバリゼーション(国際化)デジタル形式と解像度。
キーボード操作
- UP:値を1ステップ増加させます。
- DOWN:値ステップを削減します。
- このページのUP:値を増加させます。
- PAGE DOWN:値を低下させます。
マウスで回転ボタンをクリックして、フォーカスがテキストフィールドに残ります。
回転子は(読まれていない場合<input readonly>
)、ユーザは、(最小未満、最大値より大きく、ミスマッチ、非数値の入力を増減)無効な値になる可能性がある、値を入力することができます。 ときに増加または減少、プログラムまたは回転式ボタンにより、値が有効な値に強制されますが(詳細については、を参照してくださいstepUp()
およびstepDown()
について説明します。
テーマ
回転子メンバー(スピナーウィジェット)を使用してjQueryのUI CSSフレームワークを 、そのスタイルのルックアンドフィールを定義します。 あなたが指定したスタイルのスピナーを使用する必要がある場合は、以下のCSSクラス名を使用することができます。
-
ui-spinner
回転子外容器:。-
ui-spinner-input
:ローテータメンバー(スピナーウィジェット)がインスタンス化<input>
要素を。 -
ui-spinner-button
:回転子がボタンコントロールの値をインクリメントまたはデクリメントするために使用されます。 ボタンまで追加的に提供されるui-spinner-up
の追加とボタンダウン、クラス、ui-spinner-down
、クラス。
-
頼ります
- UIコア(UIコア)
- コンポーネントライブラリ(ウィジェットファクトリー)
- Buttonコンポーネント(ボタンウィジェット)
- グローバル化(グローバル化) (オプション、外部;と組み合わせると
culture
とnumberFormat
オプションで使用した場合)
追加情報
- 一部は、いくつかの機能のCSSを必要とし、それ以外の場合は動作しません。 カスタムテーマを作成する場合は、出発点として、ウィジェット指定されたCSSファイルを使用します。
- 要素の値が変更さがネイティブ誘発しないときように、コンポーネントをプログラムで、要素の値を操作する
change
イベントを。 - それはサポートしていない
<input type="number">
それがローカルUI回転子との競合の原因になりますので、セレクタを作成します。
例
一般的なデジタルセレクタ。
<!DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <タイトル>回転子メンバー(スピナーウィジェット)デモ</タイトル> <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト> <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト> </ HEAD> <ボディ> <入力されたID = "スピナー"> <スクリプト> $( "#spinner」).spinner(); </スクリプト> </ BODY> </ HTML>