Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo crear un botón de alternancia con jQuery

 Vemos el botón de encendido y apagado en muchos sitios web y también lo usamos en algunos sitios para cualquier acción.

Al hacer una acción, los codificadores piensan cómo puedo alternar Mostrar ocultar en jQuery.

En este tutorial, veremos cómo crear un botón de alternancia con jQuery .

Este artículo lo ayudará a comprender cómo crear un interruptor de palanca con jquery o cómo usar el botón de interruptor de palanca en una aplicación web.

Paginación Ajax simple con jQuery y PHP

El botón de alternancia funcionó principalmente en condiciones verdaderas y falsas. Supongamos que cuando el usuario cambia el botón de estado activado a desactivado, significa verdadero a falso. Cuando el usuario cambia el botón de APAGADO a ENCENDIDO, significa falso a verdadero;

ENCENDIDO = VERDADERO

APAGADO = FALSO

Así que veamos el script para entender cómo crear un botón de alternancia.

Tabla de contenido ocultar ]

HTML

<input type = "checkbox" id = "switch" value = "false" /> 
<label for = "switch" class = "status"> OFF </label>

jQuery

} }); }); </script>  


















CSS

<estilo>
input [type = checkbox] {
	altura: 0;
	ancho: 0;
	visibilidad: oculta;
}

etiqueta {
	relleno: 1px;
	alineación de texto: derecha;
    altura de línea: 22px;
	cursor: puntero;
	ancho: 70px;
    altura: 26px;
	fondo: gris;
	bloqueo de pantalla;
	radio del borde: 20px;
	posición: relativa;
}

etiqueta: después de {
	contenido: '';
	posición: absoluta;
	arriba: 2px;
	izquierda: 2px;
	ancho: 20px;
	altura: 20px;
	fondo: #fff;
	radio del borde: 20px;
	transición: 0,3 s;
}

entrada: marcada + etiqueta {
	fondo: verde;
}

entrada: marcada + etiqueta: después de {
	izquierda: calc (100% - 25px);
}


label: active: after {
	ancho: 20px;
}
</style>
 
Demo en vivo

Espero que hayas aprendido a crear un botón de alternancia con jQuery. Si tiene alguna consulta o problema, no dude en comentar.

Publicar un comentario

0 Comentarios