我一直在寻找一个解决方案，将可视化的过程步骤在我的网络应用程序。我发现了下面的精彩文章由Stephen A托马斯： 跟踪纯CSS中的进度（Original Link now dead） 在他的方法中，托马斯甚至只使用CSS --没有Javascript！从本质上讲，他文章中的以下CSS代码对我来说很有用：
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
}
}
<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
}
}
8条答案
按热度按时间laik7k3q1#
我一直在寻找一个解决方案，将可视化的过程步骤在我的网络应用程序。我发现了下面的精彩文章由Stephen A托马斯：
跟踪纯CSS中的进度（Original Link now dead）
在他的方法中，托马斯甚至只使用CSS --没有Javascript！从本质上讲，他文章中的以下CSS代码对我来说很有用：
以及示例中的HTML标记（我使用Grails GSP页面动态生成标记和'done/todo'类）：
希望能帮上忙。对我来说很管用。
更新：以下（缩短）版本也运行良好。
display: table; table-layout: fixed; width: 100%确保列表项的大小自动相等，只要内容不溢出。无需使用data-progtrckr-steps及其关联的CSS。11dmarpk2#
这个页面上有很多非常好的答案，我在谷歌上搜索了更多，但没有一个答案勾选了我愿望清单上的所有复选框：
所以我混合了几个例子的代码，修复了我需要的东西，下面是结果：
我使用了以下CSS和HTML：
从上面的例子中可以看出，现在有两个列表项类需要注意：
active和done。当前步骤使用class="active"，之前的所有步骤使用class="done"。还要注意
ol标记中的data-steps="4";设置这个到步骤的总数以应用正确的大小到全部列表项目.请随意摆弄JSFiddle，尽情享受吧!
vatpfxk53#
下面是如何制作一个：
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/
pkln4tw64#
这就是我如何使用纯CSS和HTML（没有JavaScript/图像等）实现它。
http://jsfiddle.net/tuPrn/
它在大多数浏览器中性能都会下降（我确实需要添加一个修复程序，以解决〈IE9中缺少last-of-type的问题）。
thigvfpy5#
我也有同样的需求来创建一种步骤进度跟踪器，所以我为此创建了一个JavaScript插件。下面是这个步骤进度跟踪器的JsFiddle演示。您也可以在GitHub上访问它的代码。
它的基本功能是，将json数据（以下面描述的特定格式）作为输入，并在此基础上创建进度跟踪器。
它的html看起来有点像下面所示的默认CSS，但你可以自定义它作为每一个主题的应用程序。有一个选项显示工具提示文本的每一个步骤以及。
下面是一些代码片段：
希望它对其他人也有用！
gzjq41n46#
我是这么做的：
1.创建jQuery. progressbar（）将div加载到进度条中。
1.在进度条的底部创建步骤 * title *。用CSS定位它们。
1.然后我在jQuery中创建函数，每次用户进入下一步时，该函数都会更改进度条的 * 值 *。
wa7juj8i7#
我在tweek @帕特里克上创建了一个razor组件来显示一个枚举的当前状态栏，效果非常好。
剃刀组件页面-案例状态剃刀：
CaseStatus.razor.css:
2o7dmzc58#
我所要做的是使用同样的技巧经常用于悬停在按钮上。准备一个图像，有2个部分：（1）上半部分为灰色，表示未完成;（2）下半部分为彩色，表示已完成。使用同一图像4次，组成进度条的4个步骤，未完成的步骤顶部对齐，未完成的步骤底部对齐。
为了利用图像对齐，您必须使用图像作为4个div的背景，而不是使用img元素。
这是用于背景图像对齐的CSS：