En este artículo, aprenderemos cómo configurar elementos de tal manera que los elementos se conviertan en elementos de menú seleccionables. Podemos usar esta técnica para crear encabezados de categoría. Y el resto de los elementos se pueden utilizar como seleccionables.
Sintaxis:
$( "#selector" ).menu({ items: "> :not(.selector)" });
Parámetros: este método acepta un parámetro como elementos.
Valor devuelto: este método no devuelve nada.
Script que debe agregarse:
Primero descargue la biblioteca 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”>
<enlace rel=”hoja de estilo” href=”/resources/demos/ style.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”></secuencia de comandos>
Ejemplo: en este ejemplo, hemos creado dos listas, una para categorías de lenguajes de programación y la otra para bibliotecas. Aquí hemos aplicado este método en nuestros dos encabezados de las diferentes categorías.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"~/jquery-ui-1.12.1.custom//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>
$(function () {
$("#menu").menu({
items: "> :not(.widget-header)"
});
});
</script>
<style>
#menu {
width: 300px;
}
.widget-header {
padding: 0.3em;
color: white;
}
</style>
</head>
<body>
<h3>Geeks for Geeks Menu Using jQuery UI</h3>
<ul id="menu">
<li class="widget-header">
<div style="background-color: green;">
Programming Languages
</div>
</li>
<li>
<div>Python</div>
</li>
<li>
<div>Javascript</div>
</li>
<li>
<div>Java</div>
</li>
<li class="widget-header">
<div style="background-color: green;">
Libraries
</div>
</li>
<li>
<div>Tensorflow</div>
</li>
<li>
<div>Pandas</div>
</li>
<li>
<div>Numpy</div>
</li>
</ul>
</body>
</html>
Producción :
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