迷你任務流程條

Question

我正在開發一個項目，我需要定義一個由4個迷你任務組成的任務流程。在此之上，我需要向最終用戶展示他是哪個迷你任務。爲此，我爲每個任務使用圖像標籤。

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

是否有任何其他方式做到這一點，比如通過使用圖像通過CSS或jQuery的有關，但不是。任何想法都很有趣。 在此先感謝。

Answer 1

這樣的事（讓我們假設前兩個任務完成！）：

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 2

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

我推薦使用JQuery UI對於這種東西，JQuery的UI CSS框架足夠豐富，可以滿足大部分基本的Web應用程序。

您可以簡單地定義爲你的任務的佈局標籤像

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

此外，你必須從JQuery用戶界面的Themeroller在那裏你可以定製你的主題，並與您的應用程序進行測試，而無需更改代碼。 我做了一個simple demo，你可以開始。