jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante HTML, CSS y jQuery. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El widget de menú de selección de jQuery UI puede proporcionarnos opciones de selección. Podemos usar este widget para hacer un formulario para diferentes acciones.
El evento de cierre jQuery UI Selectmenu se usa para activar cuando se cierra el elemento del menú. Este evento se activará cuando cerremos la lista de elementos del menú.
El evento de cambio Selectmenu acepta un único valor que se proporciona a continuación:
- evento: representa el evento para el widget de menú de selección.
Nota: el objeto ui está vacío, pero se agrega para mantener la coherencia con otros eventos.
Sintaxis:
Inicialice el menú de selección con la devolución de llamada cerrada:
$( ".selector" ).selectmenu({
close: function( event, ui ) {}
});
Vincule un detector de eventos al evento selectmenuclose:
$( ".selector" ).on(
"selectmenuclose",
function( event, ui ) {}
);
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 cierre de jQuery UI Selectmenu.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
jQuery UI Selectmenu close Event
</title>
<link rel="stylesheet" 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>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Selectmenu close Event</h3>
<label for="sub">Select Computer Subject:</label>
<select name="sub" id="sub">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="java">Java</option>
<option value="python">Python</option>
</select>
</center>
<script>
$(document).ready(function () {
$("#sub").selectmenu();
$("#sub").on("selectmenuclose", function () {
alert("Selectmenu close event triggered!");
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/selectmenu/#event-close
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA