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 conjunto de botones de jQuery UI se usa para proporcionar una agrupación visual para un grupo de botones relacionados.
La opción de elementos de conjunto de botones de jQuery UI se usa para configurar u obtener los elementos para el widget de conjunto de botones especificado.
Sintaxis: para inicializar el conjunto de botones con la opción de elementos .
$( ".selector" ).buttonset({
items: "GFG"
});
-
Configuración de la opción de artículos .
$( ".selector" ).buttonset( "option", "items", "GFG" );
-
Obtener el valor de la opción de artículos .
var items = $( ".selector" ).buttonset( "option", "items" );
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 demuestra la opción de elementos del conjunto de botones de jQuery UI .
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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 Buttonset items Option</h3>
<form>
<fieldset>
<legend>Button_Set</legend>
<div id="ButtonSet_Radio">
<input id="Company" type="radio"
checked="checked">
<label for="Company">GeeksforGeeks</label>
<input id="Department" type="radio">
<label for="Department">Computer Science</label>
</div>
</fieldset>
</form>
<input type="button" id="Button_for_items"
style="padding:5px 15px; margin-top:40px;"
value="Value of the items option">
<div id="log"></div>
</center>
<script>
$(document).ready(function () {
$("#ButtonSet_Radio").buttonset({
items: "GFG"
});
$("#ButtonSet_Radio").buttonset("option", "items", "GFG");
$("#Button_for_items").on('click', function () {
var a = $("#ButtonSet_Radio")
.buttonset("option", "items");
$("#log").html(a);
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/buttonset/#option-items
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA