jQuery Mobile es una biblioteca de JavaScript construida sobre jQuery . Se utiliza para crear sitios web y aplicaciones web receptivos y accesibles para dispositivos con diferentes tamaños de pantalla, como teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, utilizaremos el evento jQuery Mobile Flipswitch create que se activa cuando se crea el Flipswitch.
Sintaxis:
-
Inicialice el Flipswitch con el evento de creación especificado:
$( ".selector" ).flipswitch({ create: function( event, ui ) { // Your Code here. } }); -
Vincule un detector de eventos al evento flipswitchcreate :
$( ".selector" ).on( "flipswitchcreate", function( event, ui ) {} );
Parámetros: Acepta una función de devolución de llamada que contiene dos parámetros:
- evento: Acepta valor de tipo Evento .
- ui: acepta el valor del tipo de objeto . El objeto ui puede estar vacío pero se puede usar para mantener la coherencia con otros eventos en la biblioteca.
Enlaces CDN:
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-2.1.3.js”>
</script><script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”> </script>
Ejemplo: El siguiente ejemplo demuestra el uso de Flipswitch para crear un evento. Cuando se dispara el evento Flipswitch, aparece un cuadro de alerta con el mensaje «Flipswitch crea evento activado». aparece en la pantalla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksForGeeks - FlipSwitch create event</title>
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script
src=
"http://code.jquery.com/jquery-2.1.3.js">
</script>
<script
src=
"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Flipswitch Widget create event</h3>
</div>
<div class="ui-field-contain">
<form>
<div data-role="fieldcontain">
<center>
<label for="GFG"> Flipswitch: </label>
<input type="checkbox" id="GFG"
data-role="flipswitch" />
</center>
</div>
</form>
</div>
</div>
<script>
$("#GFG").flipswitch({
// Initialize the flipswitch with create
// callback specified.
create: function (event, ui) {
alert("Flipswitch create event triggered.");
}
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/flipswitch/#event-create