進捗バープラグインProgressBar(jQueryプラグインを呼び出して10日目を学習する方法)

ProgressBarはjQueryに基づいて進捗バーを開発するプラグインで、コードを使用すると簡潔で、外観を簡単にカスタマイズできるという利点があります.ページリクエストに時間がかかり、ファイルのアップロードや大きな画像など、ユーザーが待つ必要がある場合に使用します.多くのデータがロードされると、プラグインを追加してユーザーの体験を増やすことができます.
ProgressBarプラグインはImagesフォルダに6枚の画像を対応しており、そのうち1枚は背景色の画像で、5枚はカスタムの5種類の進捗色の画像である.この5枚の画像はいずれも長さが等しい2つの部分からなり、前の部分は完了した進捗値を表示し、後の部分は残りの進捗値を表示し、後の部分は残りの進捗値を表示し、異なる色で区別されます.
プログレスバープラグインProgressBarの使用:
(1)プラグインファイル:
       Js-8-9/jquery.ProgressBar.js
(2)ダウンロードアドレス:
       http://t.wits.sg/jquery-progress-bar/
(3)機能説明:
ページにID番号「pb」の要素を追加し、Javascriptコードを記述して進捗条件にバインドし、異なるパラメータ呼び出しを使用したページ効果をそれぞれ表示します.
(4)実装コード:

    $(function() {
        $("#pb").progressBar();    //     
        /*$("#pb").progressBar(68,{
            barImage:'images/progressbg_orange.gif',
            showText:false
        });//            */
        /*$("#pb").progressBar(68,{
            max:'100',
            textFormat:'fraction',
            callback:function(data) {
                if (data.running_value == data.value){
                    alert("    ");
                }
            }
        });//      */
        /*$("#pb").progressBar(68,{
            barImage:'images/progressbg_yellow.gif',
            width:120,
            height:12
        });//          */
    })

    
   ：
    
100

(5)コード分析:
この例では、ページの要素とプログレスバープラグインをバインドするコードフォーマットは次のとおりです.

$(    ).progressBar(persent,config)

ここで、$(ページ要素)はバインドする必要があるページ要素を表し、progressBar()は進捗バープラグインの要素を初期化してバインドする方法であり、この方法のパラメータpresentは現在の進捗のパーセンテージ値を表し、パラメータconfigはオブジェクトであり、このオブジェクトによって進捗バープラグインの初期化時の各属性値、例えば進捗バーの速度を設定することができる.背景色など.
ページの要素はprogressBar()を呼び出して進捗バーを初期化するとき、パラメータpresent、configはすべてオプションで、コードは以下の通りです.

$(    ).progressBar()

上記のコードは、1つの進捗表バーページ要素を初期化することを示すだけで、その進捗バーの値は指定されていません.また、進捗バーの現在の値も要素から取得できます.
また、進捗バーの値を指定して、ページ要素を初期化することもできます.コードは次のとおりです.

$(    ).progressBar(persent)

上記のコードは、指定したパーセンテージ値で進捗バーページ要素を初期化し、presentは進捗調整プラグインの現在のパーセンテージ進捗値を表します.また、2つのパラメータを呼び出してページ進捗バー要素を初期化することもできます.コードは次のとおりです.

$(    ).progressBar(persent,config)

上記のコードは、指定したpresentパーセンテージ値とconfigオブジェクト設定のプロパティ値に基づいて、進捗バーページ要素を初期化することを示します.configは、進捗バーを設定する複数のプロパティとイベントを含むオブジェクトです.プロパティとイベントの詳細は、次の表に示します.
configオブジェクトでの一般的なパラメータ
パラメータ名
機能の説明
steps
プログレスバーが前進するステップは、既定値は2ピクセルです.
stepDuration
プログレスバーが前方にスライドするときの速度は、デフォルト値が15で、値が大きいほどスライドの速度が遅くなります.
showText
進捗バーの右側にパーセンテージ文字が表示されるかどうか、デフォルト値はtrueで表示されます.
boxImage
スライドバー画像の背景URLを設定します.デフォルトは「images/progressbar.gif」です.
barImage
プログレスバー本体画像背景URLを設定し、プラグインには5種類の本体画像背景が付属し、デフォルト値は「images/progressbg_green.gif」、残りの4種類のURLアドレスはそれぞれ「images/progressbg_black.gif」、「images/progressbg_orange.gif」、「images/progressbg_red.gif」、「images/progressbg_yellow.gif」である.
width
枠線と本体の背景画像と一致する必要がある進捗バーの幅を設定します.デフォルトは120ピクセルです.
height
枠線と本体の背景画像と一致する必要があるプログレスバーの幅を設定します.デフォルトは12ピクセルです.
max
進捗バーの最大値、すなわち最大範囲を設定します.進捗バーの現在の値は、その値以下である必要があります.
textFormat
進行状況バーの右側のパーセンテージテキストの表示形式を設定します.この形式には2つあります.1つはパーセンテージで、もう1つはスコア形式で、デフォルトはパーセンテージ形式です.
callback
コールバック関数は、プログレスバーのスライドの値が設定したパーセンテージ値に等しい場合にトリガーされます.すなわち、プログレスバーのスライド効果が終了したときに呼び出されます.
説明:ページ要素を使用してプログレスバーのprogressBar()メソッドを呼び出すと、このメソッドにパラメータがあるかどうかにかかわらず、1つの要素に対して1回しか使用できず、繰り返し使用できません.そうしないと、プログレスバーの表示は異様になります.