- プログレスバーは動的、つまり 時間が経つにつれて実行（満杯）
- バーの「実行」パラメータを設定する機能
- 視覚的な使用の利便性。 たとえば、進行状況バーの現在の割合を表示する
「実行」のパラメータについて詳しく見てみましょう。 バーはさまざまな画像でパラメーター化できます。開始時間、ステップ、期間の設定。 終了時間、ステップ、期間。 開始時間、終了時間、ステップ。 私は後者、つまり プログレスバーを初期化するには、開始時間、終了時間、ステップを示すだけで十分です。
Dateオブジェクト（年、月、日付[、時間、分、秒、ミリ秒]）を使用して、開始時刻と終了時刻を記述します。 ステップはミリ秒単位の数値変数に設定されます。
さあ始めましょう
まず、jQueryライブラリとそのjQuery UIプラグイン、およびそれらのスタイルを接続しましょう。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script> <link href="jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"/>
ここのすべては一般的に明らかです。 明確でない場合は、コメントで質問してください;-)
次に、スクロールバーとなるdiv要素について説明します。
<div id="progressbar"></div>
次に、jQueryプラグインを作成します
jQuery.fn.progress = function (options){ var defaults = { start: new Date(), finish: new Date().setTime(new Date().getTime()+60000), interval: 123 } var opts = jQuery.extend(defaults, options), t = this; return this.each(function(){ var allMs = opts.finish - opts.start , plus = opts.interval/allMs*100 , devInterval; $(t) .progressbar() .before('<div id="progresspercent"></div>') .after('<div id="progresstext"></div>'); devInterval = setInterval(function(){ var ms = opts.finish - new Date() , wasMs = new Date() - opts.start , days = parseInt(ms/86400000) , hours = parseInt((ms - (days*86400000))/3600000) , min = parseInt((ms - (days*86400000) - (hours*3600000))/60000) , sec = parseInt((ms - (days*86400000) - (min*60000)- (hours*3600000))/1000) , msec = parseInt(ms - (days*86400000) - (sec*1000) - (min*60000)- (hours*3600000)) , percent = wasMs/allMs*100; if(percent >= 100){ percent = 100; } var vHours = hours > 9 ? hours : "0" + hours, vMin = min > 9 ? min : "0" + min, vSec = sec > 9 ? sec : "0" + sec, vMsec = msec >= 100 ? msec : "0" + msec, vMsec = msec > 10 ? vMsec : "0" + vMsec; $("#progresspercent").html("<b>"+percent.toFixed(4)+"%</b>"); $("#progresstext").html(" <b>~ "+days+" . "+vHours+":"+vMin+":"+vSec+"."+vMsec+" </b>"); $(t).children(".ui-progressbar-value").css("width", percent+"%"); if(percent >= 100){ clearInterval(devInterval); $("#progresstext").html(" "); } } ,opts.interval); }); }
最後に、プラグインをprogressbar要素にバインドします。
$("#progressbar").progress();
デフォルトでは、開始時間（ start ）は現在の時間、終了時間（ finish ）は60秒後、間隔は123ミリ秒です。
これらのパラメーターのいずれか（またはすべて）を次のように変更できます。
$("#progressbar").progress({start: new Date(2000, 0, 1), finish: new Date(2012, 0, 1), interval: 100});
この場合、開始は2000年1月1日、終了は2012年1月1日、間隔は100 msです。
スタイルシートについて説明しましょう。これにより、プログレスバーの外観が完成し、さらにアクティブ領域にアニメーション画像が設定されます。
<style> #progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif);display: block!important} #progresspercent {position:relative;left:230px;top:20px;} .ui-progressbar {height:20px;width:550px;text-align:center} </style>
これで、プログレスバーは最終的な形式になります。
そして、ここにプログレスバー付きのページ全体のコードがあります
<html> <head> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ jQuery.fn.progress = function (options){ var defaults = { start: new Date(), finish: new Date().setTime(new Date().getTime()+60000000000), interval: 123 } var opts = jQuery.extend(defaults, options), t = this; return this.each(function(){ var allMs = opts.finish - opts.start , plus = opts.interval/allMs*100 , devInterval; $(t) .progressbar() .before('<div id="progresspercent"></div>') .after('<div id="progresstext"></div>'); devInterval = setInterval(function(){ var ms = opts.finish - new Date() , wasMs = new Date() - opts.start , days = parseInt(ms/86400000) , hours = parseInt((ms - (days*86400000))/3600000) , min = parseInt((ms - (days*86400000) - (hours*3600000))/60000) , sec = parseInt((ms - (days*86400000) - (min*60000)- (hours*3600000))/1000) , msec = parseInt(ms - (days*86400000) - (sec*1000) - (min*60000)- (hours*3600000)) , percent = wasMs/allMs*100; if(percent >= 100){ percent = 100; } var vHours = hours > 9 ? hours : "0" + hours, vMin = min > 9 ? min : "0" + min, vSec = sec > 9 ? sec : "0" + sec, vMsec = msec >= 100 ? msec : "0" + msec, vMsec = msec > 10 ? vMsec : "0" + vMsec; $("#progresspercent").html("<b>"+percent.toFixed(4)+"%</b>"); $("#progresstext").html(" <b>~ "+days+" . "+vHours+":"+vMin+":"+vSec+"."+vMsec+" </b>"); $(t).children(".ui-progressbar-value").css("width", percent+"%"); if(percent >= 100){ clearInterval(devInterval); $("#progresstext").html(" "); } } ,opts.interval); }); } $("#progressbar").progress(); }); $('head').append('<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.14.custom.css" />'); </script> <style> #progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif);display:block!important} #progresspercent {position:relative;left:240px;top:20px;} .ui-progressbar {height:20px!important;width:550px!important;text-align:center} body{overflow:hidden;} </style> <meta http-equiv="Content-Type" content="text/html; charset=cp1251"/> </head> <body> <div id="progressbar"></div> <br><br> <a href="progressbar.zip"> </a> </body> </html>
実際の動作
ここを見ることができます