Los grupos de control se utilizan para agrupar un conjunto de botones para formar un solo bloque visualmente. Parece contenido como un componente de navegación. El grupo de control se usa para agrupar varios widgets de entrada como casillas de verificación, botones, etc.
Widget de grupo de control horizontal : en el grupo de control horizontal, podemos crear un conjunto de botones horizontalmente.
Sintaxis:
$(".first_class" ).controlgroup({});
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="first_class">
<label for="radio_1">
Stationery
</label>
<input type="radio" name="type" id="radio_1">
<label for="radio_2">
Electronics
</label>
<input type="radio" name="type" id="radio_2">
<label for="radio_3">
Clothing
</label>
<input type="radio" name="type" id="radio_3">
</div>
<script>
$(document).ready(function () {
$(".first_class").controlgroup({});
})
</script>
</center>
</body>
</html>
Producción:
Widget de grupo de control vertical : en el widget de grupo de control vertical, podemos crear un conjunto de botones verticalmente.
Sintaxis:
$(".first_class").controlgroup({"direction": "vertical"});
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="first_class">
<label for="radio_1">
Stationery
</label>
<input type="radio" name="type" id="radio_1">
<label for="radio_2">
Electronics
</label>
<input type="radio" name="type" id="radio_2">
<label for="radio_3">
Clothing
</label>
<input type="radio" name="type" id="radio_3">
</div>
<script>
$(document).ready(function () {
$(".first_class").controlgroup(
{ "direction": "vertical" });
})
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por attardeurjita77 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA