martes, 16 de julio de 2013

Flip switch toggle - Botón de estado booleano en Jquery Mobile


Flip switch toggle es otro componente muy interesante de Jquery mobile, su función principal es la de obtener un estado booleano, true|false, On|Off, ..., es muy útil para activar o desactivar procesos en una aplicación, su elemento principal es "select", para convertirlo en un botón de estado es necesario declarar el atributo data-role="slider". Sólo acepta dos posibles opciones, de lo contrario su funcionamiento será erróneo. 

En el siguiente ejemplo capturaremos el estado del botón mediante jquery y mostrará un mensaje de su estado "Encendido" o "Apagado" ... 


<script>
$(function(){
$("#flip-1").on("change", function(){
if ($(this).val() == "off")
{
$("#estado").html("Sistema Apagado");
}
else
{
$("#estado").html("Sistema Encendido");
}
});
});
</script>

<label for="flip-1">Botón de estado booleano:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

<div id="estado"></div>

Jquery Mobile