构建步骤进度栏（css和jquery） [英] Build Step Progress Bar (css and jquery)

问题描述

>

ve看到这种类型的进度栏的迭代在网站上像paypal。如何使用 CSS 和 jquery 设置此项？我有4页，每一页是一个步骤...所以4个步骤。

解决方案

可视化我的Web应用程序中的流程步骤。我找到了Stephen A Thomas写的以下优秀的文章：

在纯CSS中跟踪进度（ Original Link now dead ）

在他的方法中，Thomas甚至只使用CSS -
在本质上，他的文章中的以下CSS代码为我打电话：

 < style& 
 
<！ - 进度与步 - > 
 
 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页面生成标签， todo'类动态地）：

 < ol class =progtrckrdata-progtrckr-steps =5 
< li class =progtrckr-done>订单处理< / li> 
< li class =progtrckr-done>预制作< / li> 
< li class =progtrckr-done>在生产中< / li> 
< li class =progtrckr-done>已发货< / li> 
< li class =progtrckr-todo>已交付< / 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; 
} 
 ...和CSS的其余部分... 
 
< ol class =progtrckr> 
 ... 
< / ol> 
  

display：table; table-layout：fixed; width：100％确保列表项自动调整大小，只要内容不会溢出。没有必要使用 data-progtrckr-steps 及其关联的CSS。

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

解决方案

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:

Tracking Progress in Pure CSS (Original Link now dead)

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:

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

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

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

Hope it helps. Works pretty well for me.

---

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

    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% 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-steps and its associated CSS.

这篇关于构建步骤进度栏（css和jquery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！