Question

enter image description here

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

Answer 1

我已经搜索了一个可视化我的Web应用程序中的流程步骤的解决方案。我找到了Stephen A 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

以下是如何制作一个：

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的Best Design Practices
布局与其他答案一样
每个步骤都有一个名称和一个数字
响应式布局：字体大小独立
流体布局：列表及其项目按可用宽度缩放
名称和数字以其块为中心
＆＃34;完成＆＃34;颜色上升到包括活动项目，但不会超过它。
活动项目应以图形方式突出显示

所以我混合了几个例子的代码，修复了我需要的东西，这就是结果：

我使用了以下CSS和HTML：

＆＃13;

/* 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;
}

＆＃13;

<!-- 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>

＆＃13;

从上面的例子中可以看出，现在有两个列表项类需要注意：active和done。对当前步骤使用class="active"，对其前面的所有步骤使用class="done"。

另请注意data-steps="4"标记中的ol;将此值设置为将正确大小应用于所有列表项的步骤总数。

随意使用JSFiddle。享受！

Answer 4

这就是我使用纯CSS和HTML（没有JavaScript /图像等）来实现它的方法。

http://jsfiddle.net/tuPrn/

它在大多数浏览器中都会降级（我需要在＆lt; 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);
    });

希望它对其他人也有用！

enter image description here

Answer 6

这就是我所做的：

创建 jQuery .progressbar（），将div加载到进度条中。
在进度条底部创建步骤标题。使用 CSS 定位它们。
然后我在 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;
}

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

7 个答案: