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 jQuery UI Selectmenu open se usa para desenstringr cuando se abre el elemento del menú de selección. Este evento se activará cada vez que abramos el menú de selección.
El evento de apertura Selectmenu acepta un valor que se proporciona a continuación:
- evento: Representa el evento para el control deslizante.
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 abierta:
$( ".selector" ).selectmenu({
open: function( event, ui ) {}
});
Vincule un detector de eventos al evento selectmenuopen:
$( ".selector" ).on(
"selectmenuopen",
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 apertura del menú Select de jQuery UI.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
jQuery UI Selectmenu open 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 open 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("selectmenuopen", function () {
alert("Selectmenu open event triggered!");
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/selectmenu/#event-open
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA