En este artículo, vamos a crear un menú de selección utilizando los widgets de menú de selección de jQuery UI que pueden proporcionarnos opciones de selección. Podemos usar este widget para hacer un formulario para diferentes acciones.
Sintaxis:
$( ".selector" ).selectmenu();
Parámetro: No acepta ningún parámetro.
Valor de retorno: Devuelve un menú de selección de jQuery UI.
Archivos precompilados: descargue las bibliotecas y luego use la ruta para el script dado a continuación.
<enlace rel=”hoja de estilo” 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>
Ejemplo: en este ejemplo, podemos ver que vamos a crear un menú de selección simple usando el widget de menú de selección de jQuery UI.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/
themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/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>
$(function () {
$("#title").selectmenu();
});
</script>
<style>
.ui-menu {
width: 150px;
}
.widget-header {
padding: 0.2em;
color: white;
}
</style>
</head>
<body>
<h3>
Geeks for Geeks Selectmenu
Using jQuery UI
</h3>
<div>
<form action="#">
<fieldset>
<label for="title">Select a title</label>
<select name="title" id="title">
<option disabled selected>
Please pick one</option>
<option>Python</option>
<option>Java</option>
<option>HTML</option>
<option>C++</option>
<option>Other</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>
Producción:
Referencias: https://jqueryui.com/selectmenu/
Publicación traducida automáticamente
Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA