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

Question

提问by WillingLearner

enter image description here

在此处输入图片说明

You've seen iterations of this type of progress bar on sites like paypal. How does one go about setting this up using CSSand jquery? I have 4 pages and each page is a step... so 4 steps.

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

Answer 1

回答by Jeltok

I have searched for a solution that will visualize process steps in my web application. I have found the following excellent write-up by Stephen A Thomas:

我已经搜索了一种解决方案，可以在我的 Web 应用程序中可视化流程步骤。我发现了以下斯蒂芬·A·托马斯（Stephen A Thomas）出色的文章：

Tracking Progress in Pure CSS (Original Link now dead)

在纯 CSS 中跟踪进度（原始链接现已失效）

In his approach Thomas even gets away with just using CSS - no Javascript! In an essence the following CSS code from his article does the trick for me:

在他的方法中，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: "<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>
a0    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>
a0";
    }
    ol.progtrckr li:before {
        position: relative;
        bottom: -2.5em;
        float: left;
        left: 50%;
        line-height: 1em;
    }
    ol.progtrckr li.progtrckr-done:before {
        content: "13";
        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: "9F";
        color: silver;
        background-color: white;
        font-size: 1.5em;
        bottom: -1.6em;
    }

</style>

As well as HTML tags from his example (I use Grails GSP pages to generate tags and 'done/todo' class dynamically):

以及他示例中的 HTML 标签（我使用 Grails GSP 页面动态生成标签和“完成/待办事项”类）：

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

Hope it helps. Works pretty well for me.

希望能帮助到你。对我来说效果很好。

UPDATE: The following (shortened) version also works well.

更新：以下（缩短的）版本也运行良好。

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

display: table; table-layout: fixed; width: 100%ensure that the list items are automatically sized equally as long as the content does not overflow. There is no need to use data-progtrckr-stepsand its associated CSS.

display: table; table-layout: fixed; width: 100%只要内容不溢出，确保列表项自动调整大小。无需使用data-progtrckr-steps及其关联的 CSS。

Answer 2

回答by Patrick Atoon

There are a lot of very nice answers on this page and I googled for some more, but none of the answers ticked all the checkboxes on my wish list:

这个页面上有很多非常好的答案，我用谷歌搜索了更多，但没有一个答案勾选了我愿望清单上的所有复选框：

CSS only, no Javascript
Stick to Tom Kenny's Best Design Practices
Layout like the other answers
Each step has a name and a number
Responsive layout: font size independent
Fluid layout: the list and its items scale with the available width
The names and numbers are centered in their block
The "done" color goes up to and including the active item, but not past it.
The active item should stand out graphically

只有 CSS，没有 Javascript
坚持 Tom Kenny 的最佳设计实践
像其他答案一样布局
每个步骤都有一个名称和一个编号
响应式布局：字体大小无关
流体布局：列表及其项目随可用宽度缩放
名称和数字在它们的块中居中
“完成”颜色上升到并包括活动项目，但不会超过它。
活动项目应以图形方式突出

So I mixed the code of several examples, fixed the things that I needed and here is the result:

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

I used the following CSS and HTML:

我使用了以下 CSS 和 HTML：

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

<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" />

As can be seen in the example above, there are now two list item classes to take note of: activeand done. Use class="active"for the current step, use class="done"for all steps before it.

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

Also note the data-steps="4"in the oltag; set this to the total number of steps to apply the correct size to all list items.

还要注意data-steps="4"的ol标签; 将此设置为将正确大小应用于所有列表项的总步数。

Feel free to play around with the JSFiddle. Enjoy!

随意使用JSFiddle。享受！

Answer 3

回答by ven

Here is how to make one:

这是如何制作一个：

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

Here are some inspiration examples:

以下是一些灵感示例：

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

Answer 4

回答by Kevin Carrogan

This is how I have achieved it using purely CSS and HTML (no JavaScript/images etc.).

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

http://jsfiddle.net/tuPrn/

It gracefully degrades in most browsers (I do need to add in a fix for lack of last-of-type in < IE9).

它在大多数浏览器中优雅地降级（我确实需要添加一个修复程序，因为 < IE9 中缺少 last-of-type）。

Answer 5

回答by Sanjeev Rai

I had the same requirements to create a kind of step progress tracker so I created a JavaScript plugin for that purpose. Here is the JsFiddlefor the demo for this step progress tracker. You can access its code on GitHubas well.

我有同样的要求来创建一种步骤进度跟踪器，所以我为此创建了一个 JavaScript 插件。这是此步骤进度跟踪器演示的JsFiddle。您也可以在GitHub 上访问其代码。

What it basically does is, it takes the json data(in a particular format described below) as input and creates the progress tracker based on that. Highlighted steps indicates the completed steps.

它的基本作用是，它将 json 数据（采用下面描述的特定格式）作为输入，并基于该数据创建进度跟踪器。突出显示的步骤表示已完成的步骤。

It's html will somewhat look like shown below with default CSS but you can customize it as per the theme of your application. There is an option to show tool-tip text for each steps as well.

它的 html 看起来像下面显示的默认 CSS，但您可以根据应用程序的主题对其进行自定义。还有一个选项可以显示每个步骤的工具提示文本。

Here is some code snippet for that:

这是一些代码片段：

#divProgress
{
    width: 600px;
}

#divStepTitle
{
    width: 600px;
}

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

Hopefully it will be useful for somebody else as well!

希望它对其他人也有用！

enter image description here

在此处输入图片说明

Answer 6

回答by Quad Coders

This is what I did:

这就是我所做的：

Create jQuery .progressbar()to load a div into a progress bar.
Create the step titleon the bottom of the progress bar. Position them with CSS.
Then I create function in jQuerythat change the valueof the progressbareverytime user move on to next step.

创建jQuery .progressbar()以将 div 加载到进度条中。
在进度条底部创建步骤标题。用CSS定位它们。
然后，我创建的功能jQuery的是改变价值的的进度上，每次用户移动到下一个步骤。

HTML

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

CSS

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

Javascript/jQuery

##代码##

Answer 7

回答by Anson Kao

What I would do is use the same trick often use for hovering on buttons. Prepare an image that has 2 parts: (1) a top half which is greyed out, meaning incomplete, and (2) a bottom half which is colored in, meaning completed. Use the same image 4 times to make up the 4 steps of the progress bar, and align top for incomplete steps, and align bottom for incomplete steps.

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

In order to take advantage of image alignment, you'd have to use the image as the background for 4 divs, rather than using the img element.

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

This is the CSS for background image alignment:

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

##代码##

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

提问by WillingLearner

回答by Jeltok

回答by Patrick Atoon

回答by ven

回答by Kevin Carrogan

回答by Sanjeev Rai

回答by Quad Coders

回答by Anson Kao

相关推荐

最近更新

标签

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

提问by WillingLearner

回答by Jeltok

回答by Patrick Atoon

回答by ven

回答by Kevin Carrogan

回答by Sanjeev Rai

回答by Quad Coders

回答by Anson Kao

相关推荐

Jquery 对话框 - 对象不支持此属性或方法

jQuery 单击单选按钮时禁用文本框

如何使用 jQuery 异步加载 CSS？

jQuery CSS 媒体查询作为浏览器调整大小？

相关推荐

最近更新

标签