jquery - ビルド ステップ プログレス バー (css および jquery)

Question

Paypal などのサイトで、このタイプのプログレス バーが繰り返されているのを見てきました。CSSとを使用してこれを設定するにはどうすればよいjqueryですか? 4 つのページがあり、各ページが 1 つのステップです。つまり、4 つのステップです。

Answer 1

Web アプリケーションのプロセス ステップを視覚化するソリューションを探しました。Stephen A Thomas による次の優れた記事を見つけました。

純粋な CSS での進行状況の追跡 (元のリンクは無効になっています)

彼のアプローチでは、Thomas は CSS を使用するだけで済みます (Javascript は使用しません)。本質的に、彼の記事の次の CSS コードは、私にとってはうまくいきます。

    <style>

    <!-- Progress with steps -->

    ol.progtrckr {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    ol.progtrckr li {
        display: inline-block;
        text-align: center;
        line-height: 3em;
    }

    ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
    ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
    ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
    ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
    ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
    ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
    ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
    ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

    ol.progtrckr li.progtrckr-done {
        color: black;
        border-bottom: 4px solid yellowgreen;
    }
    ol.progtrckr li.progtrckr-todo {
        color: silver; 
        border-bottom: 4px solid silver;
    }

    ol.progtrckr li:after {
        content: "\00a0\00a0";
    }
    ol.progtrckr li:before {
        position: relative;
        bottom: -2.5em;
        float: left;
        left: 50%;
        line-height: 1em;
    }
    ol.progtrckr li.progtrckr-done:before {
        content: "\2713";
        color: white;
        background-color: yellowgreen;
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        border: none;
        border-radius: 1.2em;
    }
    ol.progtrckr li.progtrckr-todo:before {
        content: "\039F";
        color: silver;
        background-color: white;
        font-size: 1.5em;
        bottom: -1.6em;
    }

</style>

彼の例の HTML タグ (私は Grails GSP ページを使用して、タグと「done/todo」クラスを動的に生成します):

<ol class="progtrckr" data-progtrckr-steps="5">
    <li class="progtrckr-done">Order Processing</li>
    <li class="progtrckr-done">Pre-Production</li>
    <li class="progtrckr-done">In Production</li>
    <li class="progtrckr-done">Shipped</li>
    <li class="progtrckr-todo">Delivered</li>
</ol>

それが役に立てば幸い。私にとってはかなりうまくいきます。

---

更新: 次の (短縮された) バージョンも適切に機能します。

    ol.progtrckr {
        display: table;
        list-style-type: none;
        margin: 0;
        padding: 0;
        table-layout: fixed;
        width: 100%;
    }
    ol.progtrckr li {
        display: table-cell;
        text-align: center;
        line-height: 3em;
    }
    ... and the rest of the CSS ...

    <ol class="progtrckr">
        ...
    </ol>

display: table; table-layout: fixed; width: 100%コンテンツがオーバーフローしない限り、リスト項目が自動的に同じサイズになるようにします。data-progtrckr-stepsおよび関連する CSSを使用する必要はありません。

Answer 2

このページには非常に優れた回答がたくさんあり、さらにいくつかをグーグル検索しましたが、ウィッシュリストのすべてのチェックボックスにチェックを入れた回答はありませんでした。

• CSS のみ、Javascript なし
• Tom Kenny のベスト デザイン プラクティスに固執する
• 他の回答のようなレイアウト
• 各ステップには名前と番号があります
• レスポンシブ レイアウト: フォント サイズに依存しない
• 柔軟なレイアウト: リストとそのアイテムは、使用可能な幅に合わせて拡大縮小されます
• 名前と番号はブロックの中央に配置されます
• 「完了」の色は、アクティブなアイテムを含めて上がりますが、それを超えません。
• アクティブなアイテムはグラフィカルに目立つ必要があります

そのため、いくつかの例のコードを混ぜ合わせ、必要なものを修正しました。結果は次のとおりです。

次の CSS と HTML を使用しました。

/* Progress Tracker v2 */
ol.progress[data-steps="2"] li { width: 49%; }
ol.progress[data-steps="3"] li { width: 33%; }
ol.progress[data-steps="4"] li { width: 24%; }
ol.progress[data-steps="5"] li { width: 19%; }
ol.progress[data-steps="6"] li { width: 16%; }
ol.progress[data-steps="7"] li { width: 14%; }
ol.progress[data-steps="8"] li { width: 12%; }
ol.progress[data-steps="9"] li { width: 11%; }

.progress {
    width: 100%;
    list-style: none;
    list-style-image: none;
    margin: 20px 0 20px 0;
    padding: 0;
}

.progress li {
    float: left;
    text-align: center;
    position: relative;
}

.progress .name {
    display: block;
    vertical-align: bottom;
    text-align: center;
    margin-bottom: 1em;
    color: black;
    opacity: 0.3;
}

.progress .step {
    color: black;
    border: 3px solid silver;
    background-color: silver;
    border-radius: 50%;
    line-height: 1.2;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    z-index: 0;
}

.progress .step span {
    opacity: 0.3;
}

.progress .active .name,
.progress .active .step span {
    opacity: 1;
}

.progress .step:before {
    content: "";
    display: block;
    background-color: silver;
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 0.6em;
    left: 0;
    z-index: -1;
}

.progress .step:after {
    content: "";
    display: block;
    background-color: silver;
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 0.6em;
    right: 0;
    z-index: -1;
}

.progress li:first-of-type .step:before {
    display: none;
}

.progress li:last-of-type .step:after {
    display: none;
}

.progress .done .step,
.progress .done .step:before,
.progress .done .step:after,
.progress .active .step,
.progress .active .step:before {
    background-color: yellowgreen;
}

.progress .done .step,
.progress .active .step {
    border: 3px solid yellowgreen;
}

<!-- Progress Tracker v2 -->
<ol class="progress" data-steps="4">
    <li class="done">
        <span class="name">Foo</span>
        <span class="step"><span>1</span></span>
    </li>
    <li class="done">
        <span class="name">Bar</span>
        <span class="step"><span>2</span></span>
    </li>
    <li class="active">
        <span class="name">Baz</span>
        <span class="step"><span>3</span></span>
    </li>
    <li>
        <span class="name">Quux</span>
        <span class="step"><span>4</span></span>
    </li>
</ol>

上記の例でわかるように、注目すべき 2 つのリスト項目クラスがあります:activeとdone. class="active"現在のステップに使用しclass="done"、その前のすべてのステップに使用します。

タグdata-steps="4"内の にも注意してください。olすべてのリスト項目に正しいサイズを適用するには、これを合計ステップ数に設定します。

JSFiddleで自由に遊んでください。楽しみ！

Answer 3

作成方法は次のとおりです。

http://24ways.org/2008/checking-out-progress-meters

ここにいくつかのインスピレーションの例があります：

http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

Answer 4

これは、純粋にCSSとHTMLを使用して（JavaScript/画像などを使用せずに）達成した方法です。

http://jsfiddle.net/tuPrn/

ほとんどのブラウザーでは正常に機能が低下します (IE9 未満で last-of-type がないため、修正を追加する必要があります)。

Answer 5

一種の歩数進捗トラッカーを作成するのと同じ要件があったため、その目的のために JavaScript プラグインを作成しました。このステップ進捗トラッカーのデモ用のJsFiddleを次に示します。GitHubでもそのコードにアクセスできます。

基本的には、json データ (以下で説明する特定の形式) を入力として受け取り、それに基づいて進行状況トラッカーを作成します。強調表示された手順は、完了した手順を示します。

HTML は、デフォルトの CSS を使用すると以下のようになりますが、アプリケーションのテーマに従ってカスタマイズできます。各ステップのツールヒント テキストを表示するオプションもあります。

そのためのコードスニペットを次に示します。

//container div 
<div id="tracker1" style="width: 700px">
</div>

//sample JSON data
var sampleJson1 = {
ToolTipPosition: "bottom",
data: [{ order: 1, Text: "Foo", ToolTipText: "Step1-Foo", highlighted: true },
    { order: 2, Text: "Bar", ToolTipText: "Step2-Bar", highlighted: true },
    { order: 3, Text: "Baz", ToolTipText: "Step3-Baz", highlighted: false },
    { order: 4, Text: "Quux", ToolTipText: "Step4-Quux", highlighted: false }]
};    

//Invoking the plugin
$(document).ready(function () {
        $("#tracker1").progressTracker(sampleJson1);
    });

うまくいけば、それは他の誰かにも役立つでしょう！

Answer 6

これは私がしたことです：

1. jQuery .progressbar()を作成して、div をプログレス バーにロードします。
2. プログレス バーの下部にステップタイトルを作成します。それらをCSSで配置します。
3. 次に、ユーザーが次のステップに進むたびにプログレスバーの値を変更する関数をjQueryで作成します。

HTML

<div id="divProgress"></div>
<div id="divStepTitle">
    <span class="spanStep">Step 1</span> <span class="spanStep">Step 2</span> <span class="spanStep">Step 3</span>
</div>

<input type="button" id="btnPrev" name="btnPrev" value="Prev" />
<input type="button" id="btnNext" name="btnNext" value="Next" />

CSS

#divProgress
{
    width: 600px;
}

#divStepTitle
{
    width: 600px;
}

.spanStep
{
    text-align: center;
    width: 200px;
}

JavaScript/jQuery

var progress = 0;

$(function({
    //set step progress bar
    $("#divProgress").progressbar();

    //event handler for prev and next button
    $("#btnPrev, #btnNext").click(function(){
        step($(this));
    });
});

function step(obj)
{
    //switch to prev/next page
    if (obj.val() == "Prev")
    {
        //set new value for progress bar
        progress -= 20;
        $("#divProgress").progressbar({ value: progress });

        //do extra step for showing previous page
    }
    else if (obj.val() == "Next")
    {
        //set new value for progress bar
        progress += 20;
        $("#divProgress").progressbar({ value: progress });

        //do extra step for showing next page
    }
}

Answer 7

私がすることは、ボタンにカーソルを合わせるためによく使用するのと同じトリックを使用することです。2つの部分からなる画像を準備します。（1）上半分がグレー表示されて不完全であることを意味し、（2）下半分が色付きで完了していることを意味します。同じ画像を4回使用して、プログレスバーの4つのステップを構成し、不完全なステップの場合は上を揃え、不完全なステップの場合は下を揃えます。

画像の配置を利用するには、img要素を使用するのではなく、画像を4divの背景として使用する必要があります。

これは、背景画像の配置用のCSSです。

div.progress-incomplete {
  background-position: top;
}
div.progress-finished {
  background-position: bottom;
}