javascript - 小任务流程条

Question

我正在做一个项目，我需要定义一个包含 4 个迷你任务的任务流。除此之外，我需要向最终用户展示他在哪个迷你任务中。为此，我为每个任务使用图像标签。

 <img>1</img>
 <img>2</img>
 <img>3</img>
 <img>4</img>

有没有其他方法可以做到这一点，比如通过 css 或 jquery 关联它，而不是通过使用 image. 任何想法都适用。提前致谢。

Answer 1

您可以用 s 替换您的图像<div>并使用background-image（或者background-color如果您需要一个简单的填充）css 规则：

HTML：

<div class="task">1</div>
<div class="task">2</div>
<div class="task">3</div>
<div class="task">4</div>

CSS：

.task {
    /* image */
    background-image: url('/path/to/image');
    /* or color */
    background-color: #FF0000;
    /* or both */
    background: url('/path/to/image') no-repeat 0 0 #FF0000;
}

Answer 2

我推荐使用JQuery UI来处理这类东西，JQuery UI CSS 框架足够丰富，可以满足大多数基本的 Web 应用程序。

您可以简单地为您的任务标签定义布局，例如

.tasklabel{
    width:80px;
    height:40px;
    float:left;
}

此外，您还拥有来自 JQuery UI 的Themeroller，您可以在其中自定义主题并使用您的应用程序对其进行测试，而无需对代码进行任何更改。我做了一个简单的演示，你可以开始。

Answer 3

像这样的事情（让我们假设前 2 个任务已完成！）：

HTML：

<div class='project'>
  <div class='task completed taskName1 '></div>
  <div class='task completed taskName2 '></div>
  <div class='task current taskName3 '></div>
  <div class='task taskName4 '></div>
</div>

CSS：

.project {
  /*project styles here...*/
}

.task {
  /*task styles here...
  ...default styles*/
}

.task.completed {
  /*completed task styles here...
   override .task styles to show completed
*/
}

.task.current {
  /*completed task styles here...
   override .task styles to show current
*/
}

.taskNameX {
  /*use task specific styles here*/
}