Esta imagen muestra el balance del nivel de gasolina que se puede tener; lo extraje de un proyecto de automotriz dirigido a un aplicativo web, implementando JQuery con el componente JSlider.
Descargamos la versión jquery-1.7.1.js y jquery-ui-1.8.16.custom.min.js del plugin para JQuery,
descargar aquí
Una vez obtenido el código, pasaremos a crear nuestra página web.
/* INICIO DE CÓDIGO */
<html>
<head>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$( "#fuel" ).slider({ //El nombre fuel es el id del div
value:2,
min: 0,
max: 4,
step: 1,
slide: function( event, ui ) {
$( "#f_fuel" ).val( ui.value );
}
});
$( "#oil" ).slider({ //El nombre oil es el id del div
value:2,
min: 0,
max: 4,
step: 1,
slide: function( event, ui ) {
$( "#f_oil" ).val( ui.value );
}
});
</script>
<link href="css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 200px;">
<tr>
<td style="width: 10px;"></td>
<td style="width: 1px;">E</td>
<td style="width: 60px;" align="center">
<div id="fuel" style="width: 60px;"></div>
<input type="hidden" id="f_fuel" name="f_fuel" value="2" />
</td>
<td style="width: 1px;">F</td>
<td style="width: 10px;"></td>
<td style="width: 1px;">L</td>
<td style="width: 60px;" align="center">
<div id="oil" style="width: 60px;"></div>
<input type="hidden" id="f_oil" name="f_oil" value="2" />
</td>
<td style="width: 1px;">F</td>
<td style="width: 10px;"></td>
</tr>
<tr>
<td style="width: 10px;"></td>
<td style="width: 1px;"></td>
<td style="width: 60px;">GASOLINA</td>
<td style="width: 1px;"></td>
<td style="width: 10px;"></td>
<td style="width: 1px;"></td>
<td style="width: 60px;">ACEITE</td>
<td style="width: 1px;"></td>
<td style="width: 10px;"></td>
</tr>
</table>
</body>
</html>
/* FIN DE CÓDIGO */
Con esto podremos implementar el código de nuestro JSlider, el contenido azul es el código html necesario para tener una mejor apariencia como la del dibujo principal.
/* Es el estilo que usará JQuery, escojan el de su conveniencia o pueden mejorar la hoja css para tener una apariencia más a su realidad */
jquery.ui.all.css
Las etiquetas input son las que recibirán los valores según convenga o se escoja pero la colocamos por defecto en value="2" por motivos de personalidad, los intervalos del componente oscilan entre 0 - 4 contando 5 posiciones para establecer el marcador de la gasolina o el aceite.
Nada cuesta comentar, así entenderé que les agradó este artículo.
