构建步骤进度条（css 和 jquery）

Question

您已经在 paypal 等网站上看到过此类进度条的迭代。如何使用 CSS 和 jquery 进行设置？我有 4 页，每页都是一个步骤...所以 4 个步骤。

Answer 1

我一直在寻找一种能够可视化 Web 应用程序中的流程步骤的解决方案。我发现了 Stephen A Thomas 的以下精彩文章：

Tracking Progress in Pure 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>

显示：表格；表格布局：固定； width: 100% 确保只要内容不溢出，列表项就会自动调整大小。无需使用 data-progtrckr-steps 及其关联的 CSS。

Answer 2

此页面上有很多非常好的答案，我在 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 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 中缺少最后一个类型的问题。

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

我调整了 @Patrick Atoon 的答案，并创建了一个剃刀组件来显示枚举中的当前状态栏。这非常有效。

Razor 组件页面 - CaseStatus.razor:

<p>Case Status Tracker</p>
<ol class="casestatus">
    @foreach (var s in statusBars)
    {
        <li class="@s.State">
            <span class="name">@s.Name</span>
            <span class="step"><span class="count"></span></span>
        </li>
    }
</ol>
<hr />

@code {
    //Enum Status Names
    private string[] status;
    //Current Status - best if parameter
    private Status currentStatus;
    //List of Names and progress states - done, active, (empty)
    private List<statusBar> statusBars { get; set; }

    protected override async Task OnInitializedAsync()
    {
        //Test current status (progress)
        currentStatus = Status.Engineering;
        statusBars = new List<statusBar>();
        status = Enum.GetNames(typeof(Status));
        var statusval = Enum.GetValues(typeof(Status)).Cast<int>().ToList();
        for(int i=0; i < status.Length; i++){
            var value = statusval[i];
            string state = "done";
            if (((int)currentStatus) == value)
            {
                state = "active";
            } else {
                if (((int)currentStatus) < value)
                {
                    state = "";
                }
            }
            statusBars.Add(new statusBar()
                {
                    Name = status[i],
                    State = state
                });
        }
    }
    public class statusBar
    {
        public string Name { get; set; }
        public string State { get; set; }
    }
    public enum Status
    {
        Request = 0,
        Submitted = 1,
        Engineering = 2,
        InApproval = 3,
        Approved = 4,
        Production = 5,
        Complete = 6
    }

}

CaseStatus.razor.css:

/* casestatus Tracker v2.1 */
.casestatus {
    counter-reset: li;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    width: 100%;
    list-style: none;
    list-style-image: none;
    margin: 20px 0 20px 0;
    padding: 0;
}

    .casestatus li {
        flex-grow: 1;
        text-align: center;
        position: relative;
    }

    .casestatus .name {
        display: block;
        margin-bottom: 1em;
        color: white;
        opacity: 0.3;
    }

    .casestatus .step {
        color: black;
        border: 3px solid silver;
        background-color: silver;
        border-radius: 50%;
        line-height: 2;
        width: 2em;
        height: 2em;
        display: inline-block;
    }

        .casestatus .step span.count:before {
            opacity: 0.3;
            content: counter(li);
            counter-increment: li
        }

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

    .casestatus .step:before {
        content: "";
        display: block;
        background-color: silver;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.8em;
        left: -0.76em;
    }

    .casestatus .step:after {
        content: "";
        display: block;
        background-color: silver;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.8em;
        right: -0.76em;
    }

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

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

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

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

Answer 8

我要做的就是使用通常用于悬停在按钮上的相同技巧。准备一张由两部分组成的图像：(1) 上半部分呈灰色，表示不完整；(2) 下半部分呈彩色，表示已完成。使用同一张图片4次来组成进度条的4个步骤，不完整的步骤顶部对齐，不完整的步骤底部对齐。

为了利用图像对齐，您必须使用图像作为 4 个 div 的背景，而不是使用 img 元素。

这是用于背景图像对齐的 CSS：

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