dropdownlist - Barra de progreso de compilación(css y jquery)
pestañas jquery ui (7)
Has visto iteraciones de este tipo de barra de progreso en sitios como PayPal. ¿Cómo hace uno para configurar esto usando CSS y jquery ? Tengo 4 páginas y cada página es un paso ... entonces 4 pasos.
Aquí está cómo hacer uno:
http://24ways.org/2008/checking-out-progress-meters
Aquí hay algunos ejemplos de inspiración:
Así es como lo he logrado utilizando puramente CSS y HTML (sin JavaScript / imágenes, etc.).
Se degrada graciosamente en la mayoría de los navegadores (tengo que agregar una solución por falta de último-tipo en <IE9).
Esto es lo que hice:
- Crea jQuery. Progressbar () para cargar un div en una barra de progreso.
- Crea el título del paso en la parte inferior de la barra de progreso. Colóquelos con CSS .
- Luego creo una función en jQuery que cambia el valor de la barra de progreso cada vez que el usuario avanza al siguiente paso.
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
}
}
Hay muchas respuestas muy buenas en esta página y busqué en Google algunas más, pero ninguna de las respuestas marcaba todas las casillas de verificación en mi lista de deseos:
- CSS solo, sin Javascript
- Siga las mejores prácticas de diseño de Tom Kenny
- Diseño como las otras respuestas
- Cada paso tiene un nombre y un número
- Diseño receptivo: tamaño de letra independiente
- Diseño de fluidos: la lista y sus elementos se escalan con el ancho disponible
- Los nombres y números están centrados en su bloque
- El color "acabado" sube e incluye el elemento activo, pero no más allá.
- El elemento activo debe destacarse gráficamente
Así que mezclé el código de varios ejemplos, arreglé las cosas que necesitaba y aquí está el resultado:
Usé el siguiente CSS y 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>
Como se puede ver en el ejemplo anterior, ahora hay dos clases de elementos de lista para tomar nota de: active y done . Use class="active" para el paso actual, use class="done" para todos los pasos anteriores.
También tenga en cuenta los data-steps="4" en la etiqueta ol ; establezca esto en el número total de pasos para aplicar el tamaño correcto a todos los elementos de la lista.
Siéntete libre de jugar con JSFiddle . ¡Disfrutar!
He buscado una solución que visualizará los pasos del proceso en mi aplicación web. He encontrado la siguiente excelente reseña de Stephen A Thomas:
Seguimiento del progreso en CSS puro (el enlace original ahora está muerto )
En su enfoque, Thomas incluso se sale con la suya simplemente usando CSS, ¡sin Javascript! En esencia, el siguiente código CSS de su artículo me convence:
<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>
Además de las etiquetas HTML de su ejemplo (utilizo las páginas Grails GSP para generar etiquetas dinámicamente y la clase ''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>
Espero eso ayude. Funciona muy bien para mí.
ACTUALIZACIÓN : La siguiente versión (abreviada) también funciona bien.
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% display: table; table-layout: fixed; width: 100% asegúrese de que los elementos de la lista tengan el mismo tamaño automáticamente siempre que el contenido no se desborde. No es necesario utilizar data-progtrckr-steps y su CSS asociado.
Lo que haría es utilizar el mismo truco que a menudo se usa para colocar los botones. Prepare una imagen que tenga 2 partes: (1) una mitad superior que está gris, lo que significa incompleta, y (2) una mitad inferior que está coloreada, es decir, completada. Use la misma imagen 4 veces para completar los 4 pasos de la barra de progreso, y alinee la parte superior para los pasos incompletos, y alinee la parte inferior para los pasos incompletos.
Para aprovechar la alineación de la imagen, debe usar la imagen como fondo para 4 divs, en lugar de usar el elemento img.
Este es el CSS para la alineación de imágenes de fondo:
div.progress-incomplete {
background-position: top;
}
div.progress-finished {
background-position: bottom;
}
Tenía los mismos requisitos para crear un tipo de rastreador de progreso por pasos, así que creé un complemento de JavaScript para ese fin. Aquí está el JsFiddle para la demostración de este rastreador de progreso del paso. También puedes acceder a su código en GitHub .
Lo que básicamente hace es tomar los datos json (en un formato particular descrito abajo) como entrada y crea el rastreador de progreso basado en eso. Los pasos resaltados indican los pasos completados.
Es html de alguna manera se verá como se muestra a continuación con CSS predeterminado, pero puede personalizarlo según el tema de su aplicación. También hay una opción para mostrar texto de sugerencia de herramienta para cada paso.
Aquí hay un fragmento de código para eso:
//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);
});
¡Espero que también sea útil para alguien más!