構建步驟進度條（css和jquery）

Question

您已經在Paypal等網站上看到了此類進度條的迭代。 如何使用CSS和jquery ？ 我有4頁，每頁都是一步...所以4個步驟。

Answer 1

我已經搜索了一個可視化我的Web應用程序中的流程步驟的解決方案。 我找到了Stephen A Thomas的以下優秀文章：

追蹤純CSS的進展（ 原始鏈接現已死亡 ）

在他的方法中，托馬斯甚至只使用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% display: table; table-layout: fixed; width: 100%確保列表項的大小自動相同，只要內容不溢出即可。 無需使用data-progtrckr-steps及其關聯的CSS。

Answer 2

以下是如何制作一個：

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 3

在這個頁面上有很多非常好的答案，我用Google搜索了一些，但沒有一個答案勾選了我願望清單上的所有復選框：

• 僅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> 

從上面的例子中可以看出，現在有兩個列表項類需要注意： active和done 。 對當前步驟使用class="active" ，對它之前的所有步驟使用class="done" 。

另請注意ol標簽中的data-steps="4" ; 將此值設置為將正確大小應用於所有列表項的步驟總數。

隨意玩JSFiddle 。 請享用！

Answer 4

這就是我使用純CSS和HTML（沒有JavaScript /圖像等）實現它的方法。

http://jsfiddle.net/tuPrn/

它在大多數瀏覽器中都會降級（我需要在<IE9中添加缺少最后一個類型的修復程序）。

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

我要做的是使用經常用於懸停在按鈕上的相同技巧。 准備一個有兩部分的圖像：（1）上半部分是灰色的，意思是不完整的，（2）下半部分是彩色的，意思是完成的。 使用相同的圖像4次來組成進度條的4個步驟，並將頂部對齊不完整的步驟，並將底部對齊不完整的步驟。

為了利用圖像對齊，您必須使用圖像作為4個div的背景，而不是使用img元素。

這是用於背景圖像對齊的CSS：

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