构build步骤进度条（css和jquery）
您已经在PayPal等网站上看到了这种types的进度条迭代。 如何使用CSS和jquery来设置这个呢？ 我有4页，每页是一个步骤…所以4个步骤。
我已经search了一个解决scheme，将可视化我的Web应用程序中的stream程步骤。 我发现斯蒂芬·A·托马斯（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页面dynamic生成标签和'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%确保只要内容不溢出，列表项目就会自动resize。 不需要使用data-progtrckr-steps及其关联的CSS。
这就是我使用纯粹的CSS和HTML（没有JavaScript /图像等）实现的方式。
它在大多数浏览器中正常降级（我需要在<IE9中添加缺less最后一种types的修补程序）。
在这个页面上有很多非常好的答案，我search了更多，但没有答案勾选我的愿望清单上的所有checkbox：
- 只有CSS，没有Javascript
- 坚持Tom Kenny的最佳devise实践
- 布局像其他的答案
- 每一步都有一个名字和一个号码
- 响应式布局：字体大小无关
- stream体布局：列表及其项目与可用宽度一起缩放
- 名字和数字集中在他们的块中
- “完成”的颜色上到并包括活动的项目，但没有超过它。
- 活动项目应该以graphics的方式突出
所以我混合了几个例子的代码，修复了我需要的东西，结果如下：
我使用了下面的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>
我也有相同的要求来创build一种步进跟踪器，所以我为此创build了一个JavaScript插件。 这是步骤进度跟踪器演示的JsFiddle 。 你也可以在GitHub上访问它的代码。
它的基本function是将json数据（以下面描述的特定格式）作为input，并基于此创build进度追踪器。 突出显示的步骤表示完成的步骤。
它的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); });
希望对其他人也有用！
这就是我所做的：
- 创buildjQuery .progressbar（）来将div加载到进度条中。
- 在进度条底部创build步骤标题 。 用CSS定位它们。
- 然后，我在jQuery中创build函数，每次用户移动到下一步时都会更改进度条的值 。
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 } }
我会从这个http://jqueryui.com/demos/progressbar/
然后修改风格是你想要的样子。
你正在使这比它需要更困难。 只需制作四个独立的图像，并链接到您的四个页面中的每一个。 简单。
我会做的是使用相同的技巧常常用于hover在button上。 准备一个有两个部分的图像：（1）上半部分是灰色的，意思是不完整的，（2）下半部分是彩色的，意思是完成的。 使用相同的图像4次来组成进度条的4个步骤，alignment顶部不完整的步骤，并alignment底部的不完整的步骤。
为了利用图像alignment，您必须使用图像作为4个div的背景，而不是使用img元素。
这是背景图像alignment的CSS：
div.progress-incomplete { background-position: top; } div.progress-finished { background-position: bottom; }
