jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, CSS y HTML. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. Un grupo de control se usa para agrupar varios widgets de entrada como casillas de verificación, botones, etc. El grupo de control ayuda a aplicar propiedades comunes a todos los elementos de un formulario.
El evento de creación de grupo de control de jQuery UI se usa para activarse cuando se crea el widget de grupo de control.
Sintaxis:
Inicialice el grupo de control con la devolución de llamada de creación especificada:
$( ".selector" ).controlgroup({
create: function( event, ui ) {}
});
Vincule un detector de eventos al evento controlgroupcreate:
$( ".selector" ).on( "controlgroupcreate",
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.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery- 1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: Este ejemplo describe los usos del evento de creación de jQuery UI Controlgroup.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$(document).ready(function () {
$("#GFG").controlgroup({
create: function( event, ui ) {
alert("Widget Created!");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Controlgroup create Event</h3>
<div id="GFG">
<label for="radio_1">Men</label>
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women</label>
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official</label>
<input type="checkbox" name="official" id="official">
</div>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/controlgroup/#event-create