Вы видели повторения этого типа индикатора выполнения на сайтах, таких как paypal. Как это сделать, используя CSS
и jquery
? У меня 4 страницы, и каждая страница - это шаг... так что 4 шага.
Вы видели повторения этого типа индикатора выполнения на сайтах, таких как paypal. Как это сделать, используя CSS
и jquery
? У меня 4 страницы, и каждая страница - это шаг... так что 4 шага.
Я искал решение, которое будет визуализировать шаги процесса в моем веб-приложении. Я нашел следующую отличную рецензию Стивена Томаса:
Отслеживание прогресса в чистом 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 для генерации тегов и динамического класса "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>
Надеюсь, это поможет. Хорошо работает для меня.
UPDATE. Следующая (сокращенная) версия также хорошо работает.
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%
убедитесь, что элементы списка автоматически по размеру равны до тех пор, пока содержимое не переполняется. Нет необходимости использовать data-progtrckr-steps
и связанный с ним CSS.
Вот как это сделать:
http://24ways.org/2008/checking-out-progress-meters
Вот примеры вдохновения:
Вот как я это сделал, используя чисто CSS и HTML (без JavaScript/изображений и т.д.).
Он грамотно деградирует в большинстве браузеров (мне нужно добавить исправление из-за отсутствия последнего типа в < IE9).
На этой странице есть много очень хороших ответов, и я еще больше искал googled, но ни один из ответов не отмечил все флажки в моем списке пожеланий:
Итак, я смешал код нескольких примеров, исправил то, что мне было нужно, и вот результат:
Я использовал следующие 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>
У меня были такие же требования для создания своего рода отслеживания прогресса шагов, поэтому я создал для этого плагин JavaScript. Ниже приведена JsFiddle для демонстрации этого отслеживателя прогресса шага. Вы можете получить доступ к его коду GitHub.
В основном это означает, что в качестве входных данных он принимает данные json (в определенном формате, описанном ниже) и создает на нем отслеживатель прогресса. Выделенные шаги показывают завершенные шаги.
Это 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);
});
Надеюсь, это будет полезно и для кого-то другого!
Это то, что я сделал:
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/
И затем измените стиль так, как бы вы хотели.
Вы делаете это сложнее, чем нужно. Просто сделайте четыре отдельных изображения и соедините их с одним из четырех страниц. Легко.
Что бы я сделал, это использовать ту же трюк, которая часто используется для зависания кнопок. Подготовьте изображение, которое состоит из двух частей: (1) верхняя половина, которая выделена серым цветом, что означает неполное, и (2) нижняя половина, которая окрашена в, что означает завершено. Используйте одно и то же изображение 4 раза, чтобы выполнить 4 шага индикатора выполнения, и выровняйте верхнюю часть для неполных шагов и выровняйте нижнюю часть для неполных шагов.
Чтобы использовать преимущества выравнивания изображений, вам нужно использовать изображение в качестве фона для 4 div, а не использовать элемент img.
Это CSS для выравнивания фонового изображения:
div.progress-incomplete {
background-position: top;
}
div.progress-finished {
background-position: bottom;
}