jquery - ステップバイステップのフォーム進行を反映するjquery/css進行バーを作成するにはどうすればよいですか?

Question

プログレスバーがいっぱいになっていることを示すプログレスバーの例をたくさん見ます。ただし、進捗状況を段階的に反映させる方法を知りたいだけです。私が望むものの良い例は、ここで見ることができます。他のページからの有用なコードまたは例/デモは、あるとよいでしょう。

ありがとう！

Answer 1

あなたがバッファローのものが好きなら、彼らがそれをどのように行うかを見てください。

まず、次のようにdivを定義します。

<div id="progress">
    <div id="complete" class="s1">
        <div id="marker"></div>
    </div>
</div>

次に、CSSを使用して、進行状況に基づいてdivをレンダリングします（これはclass = "s1"などで制御されます）。

/**
 * PROGRESS
 */
#progress,#complete {
    width: 520px;
    margin: 1px 0 19px;
    height: 32px;
    background:url(/img/backgrounds/progress.png);
    position:relative;
}
#complete {
    background-position: 0px 57px;
    margin-top: 0;
}
#complete #marker {
    position: absolute;
    top: 0;
    right: -26px;
    background:url(/img/backgrounds/markers.png);
    width: 26px;
    height: 32px;
}
#progress .s1 {
    width: 19px;
}
#progress .s2 {
    width:111px;
}
#progress .s3 {
    width:203px;
}
#progress .s4 {
    width:295px;
}
#progress .s5 {
    width:386px;
}
#progress .s6 {
    width:478px;
}
#progress .s2 #marker {
    background-position: -26px 0;
}
#progress .s3 #marker {
    background-position: -52px 0;
}
#progress .s4 #marker {
    background-position: -78px 0;
}
#progress .s5 #marker {
    background-position: -104px 0;
}
#progress .s6 #marker {
    background-position: -130px 0;
}

CSSは画像を操作して、目的の状態を表示します