jQueryのUIの例 - プログレスバー（プログレスバー）
不確実性のあるプロセスや状態を表示します。
プログレスバーのメンバーの詳細については、APIドキュメントを参照してください。 プログレスバーのメンバー（プログレスバーウィジェットを） 。
デフォルトの機能
デフォルトでは、プログレスバーが決定されます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのプログレスバー（プログレスバー） - デフォルトの機能</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#progressbar」）.progressbar（{
値：37
}）;
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "プログレスバー"> </ div>の
</ BODY>
</ HTML>
カスタムラベル
カスタム更新ラベル。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのプログレスバー（プログレスバー） - カスタムタブ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スタイル>
.ui-プログレス{
位置：相対;
}
.progressラベル{
位置：絶対;
左：50％;
トップ：4PX。
フォント重量：太字;
テキストの影：1pxの1pxは0 #FFF;
}
</スタイル>
<スクリプト>
$（関数（）{
VARプログレス= $（ "#progressbar"）、
progressLabel = $（ ".progressラベル"）;
progressbar.progressbar（{
値：falseの場合、
変更：関数（）{
progressLabel.text（progressbar.progressbar（ "値"）+ "％"）;
}、
完了：関数（）{
progressLabel.text（ "完成！"）;
}
}）;
機能の進行（）{
するvarヴァル= progressbar.progressbar（ "値"）|| 0;
progressbar.progressbar（ "値"、valを+ 1）;
場合（ヴァル<99）{
setTimeout（進行、100）;
}
}
setTimeout（進歩、3000）。
}）;
</スクリプト>
</ HEAD>
<ボディ>
<DIV idは= "プログレスバー">の<divクラス= "進歩ラベル">読み込んでいます... </ divの> </ div>の
</ BODY>
</ HTML>
不定値
無限のプログレスバー、および特定および不確実なスタイルを切り替えることができます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル> jQueryのUIのプログレスバー（プログレスバー） - 不定値</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
<リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
<スクリプト>
$（関数（）{
$（ "#progressbar」）.progressbar（{
値：偽
}）;
$（ "ボタン"）.on（「クリック」、関数（イベント）{
するvarターゲット= $（event.target）、
プログレスバー= $（ "#progressbar"）、
progressbarValue = progressbar.find（「.ui-プログレス値 "）;
場合（target.is（「#numButton "））{
progressbar.progressbar（ "オプション"、{
値：Math.floor（Math.random（）* 100）
}）;
}エルス場合（target.is（「#colorButton "））{
progressbarValue.css（{
"背景"： '＃' + Math.floor（Math.random（）* 16777215）.toString（16）
}）;
}エルス場合（target.is（「#falseButton "））{
progressbar.progressbar（ "オプション"、 "値"、false）を。
}
}）;
}）;
</スクリプト>
<スタイル>
#progressbar .ui-プログレス値{
背景色：#CCC;
}
</スタイル>
</ HEAD>
<ボディ>
<DIVのID = "プログレスバー"> </ div>の
<ボタンID = "数値ボタン">ランダム値 - OK </ button>の
<ボタンID = "falseButton">確かに</ button>の
<ボタンID = "colorButton">ランダムな色</ button>の
</ BODY>
</ HTML>