jQueryのUI API - プログレスバーのメンバー(プログレスバーウィジェット)
カテゴリ
使用法
説明:明確なまたは不定プロセスの状態を表示します。
新バージョン:1.6
プログレスバーは、現在の進捗状況の完了の割合を示すように設計されています。 サイズを調整するための柔軟性をコーディングCSSによって、プログレスバーは、デフォルトでは、親コンテナのサイズに適応するように調整されます。
プログレスバーを決定するだけ正確にケースの現在の状態を更新することができるシステムで使用することができます。 プログレスバーが左から右に記入しないであろう決定は、空をループバックする - あなたはユーザーからのフィードバックを提供するために、無限のプログレスバーを使用し、実際の状態を計算することができない場合。
テーマ
使用して、プログレスバーのメンバー(プログレスバーウィジェット) のjQuery UI CSSフレームワークは、そのスタイルのルックアンドフィールを定義します。 あなたが指定したスタイルのプログレスバーを使用する必要がある場合は、以下のCSSクラス名を使用することができます。
-
ui-progressbar
:外側容器の進捗状況。 不確実性のこの要素は、追加のプログレスバーに追加されますui-progressbar-indeterminate
、クラス。-
ui-progressbar-value
:この要素は、充填部の進行状況を表します。-
ui-progressbar-overlay
:アニメーションを表示するためのオーバーレイは、不確定進捗バーです。
-
-
頼ります
追加情報
- 一部は、いくつかの機能のCSSを必要とし、それ以外の場合は動作しません。 カスタムテーマを作成する場合は、出発点として、ウィジェット指定されたCSSファイルを使用します。
例
シンプルなjQueryの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> <ボディ> <DIVのID = "プログレスバー"> </ div>の <スクリプト> $( "#progressbar」).progressbar({ 値:偽 }); </スクリプト> </ BODY> </ HTML>