迷你任务流动吧

Question

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

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

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

Answer 1

您可以使用<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

像这样的东西（假设前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*/
}

Answer 3

我建议使用JQuery UI来处理这类内容，JQuery UI CSS框架足以满足大多数基本Web应用程序的需要。

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

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

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