Latest web development tutorials
×

jQuery UI コース

jQuery UI コース jQuery UI 簡単な紹介 jQuery UI ダウンロード jQuery UI 使用 jQuery UI カスタマイズ jQuery UI ワークス

jQuery UI テーマ

jQuery UI テーマ jQuery UI ThemeRoller jQuery UI CSS フレーム API jQuery UI デザインテーマ

jQuery UI コンポーネントライブラリ

jQuery UI コンポーネントライブラリ jQuery UI 拡張ウィジェット jQuery UI メソッド呼び出しウィジェット jQuery UI なぜウィジェットライブラリを使用 jQuery UI ウィジェットライブラリを使用する方法

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

jQuery UI API ファイル API カテゴリ - 特別に良い効果 API カテゴリ - エフェクトコア API カテゴリ - 交互に API カテゴリ - メソッドのオーバーロード API カテゴリ - ウェイ API カテゴリ - セレクタ API カテゴリ - テーマ API カテゴリ - UI コア API カテゴリ - ユーティリティ API カテゴリ - ウィジェット

jQuery UI 例

jQuery UI 例 ドラッグ 場所 スケーリング 選択します シーケンス 折りたたみパネル オートコンプリート プッシュボタン 日付ピッカー ダイアログ メニュー プログレスバー スライダー 回転子 タブ ツールチップボックス 特別に良い効果 ディスプレイ 隠します 切り替え .addClass() .removeClass() .toggleClass() .switchClass() カラーアニメーション 検索します コンポーネントライブラリ

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 、クラス。

頼ります

追加情報

  • 一部は、いくつかの機能の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>