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 jQuery UI Buttonset se usa para proporcionar una agrupación visual para un grupo de botones relacionados.
El evento jQuery UI Buttonset create se activa cuando se crea el conjunto de botones.
Sintaxis:
-
Inicializar el conjunto de botones con la devolución de llamada de creación específica:
$( ".selector" ).buttonset({ create: function( event, ui ) {} }); -
Vincula un detector de eventos al evento buttonsetcreate:
$( ".selector" ).on( "buttonsetcreate", 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 demuestra el evento de creación de jQuery UI Buttonset .
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 create Event</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="Create the buttonset widget">
<div id="log"></div>
</center>
<script>
$(document).ready(function () {
$("#Button_for_items").on('click', function () {
$("#ButtonSet_Radio").buttonset({
create: function () { }
});
$("#ButtonSet_Radio").on(
"buttonsetcreate", function () { });
$("#log").html('Buttonset widget has been created.');
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/buttonset/#event-create
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