Un grupo de control se usa para agrupar varios widgets de entrada como casillas de verificación, botones, etc. El grupo de control ayuda a aplicar propiedades comunes a todos los elementos de un formulario. Por ejemplo, si el usuario declara que la dirección actual es la misma que una dirección permanente, podemos deshabilitar la sección utilizada para ingresar la dirección permanente. Controlgroup funciona eligiendo los descendientes apropiados y aplicando sus respectivos widgets. Si los widgets ya existen, se llama a su método refresh(). El grupo de control se puede habilitar y deshabilitar, lo que habilita y deshabilita todos los widgets contenidos.
Sintaxis:
$( ".my_games_control_group" ).controlgroup({
});
Atributos:
- destroy: se utiliza para eliminar la función de grupo de control de su código.
- deshabilitar: se usa para deshabilitar el grupo de control.
- habilitar: Se utiliza para habilitar el grupo de control si se deshabilitó previamente.
- instancia: Devuelve la instancia del objeto actual.
- opción: Devuelve el valor actualmente asociado con el nombre de la opción especificada.
- actualizar: se utiliza para procesar cualquier widget que se haya agregado o eliminado.
- widget: Devuelve un objeto que contiene todo el grupo de control.
Vamos a crear un grupo de control simple y básico que tenga un botón de radio, un menú desplegable, una casilla de verificación, una etiqueta y un botón. Para hacer esto, especificamos los widgets dentro de una clase y mencionamos el nombre de la clase dentro del código javascript dentro de la etiqueta del script.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="my_games_control_group">
<label for="radio_1">Men</label>
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women</label>
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official</label>
<input type="checkbox"
name="official"
id="official">
<button id="apply">Apply</button>
</div>
<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>
<script>
$(document).ready(function() {
$(".my_games_control_group").controlgroup({});
})
</script>
</center>
</body>
</html>
Producción:
Cambiar la dirección/orientación del grupo de control: La orientación del grupo de control se puede cambiar especificándola en la opción «Dirección» . De forma predeterminada, está configurado en horizontal, se puede usar para cambiar la orientación a vertical.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<div class="my_games_control_group">
<label for="radio_1">Men</label>
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women</label>
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official</label>
<input type="checkbox" name="official" id="official">
<button id="apply">Apply</button>
</div>
<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>
<script>
$(document).ready(function() {
$(".my_games_control_group").controlgroup({
"direction": "vertical"
});
})
</script>
</center>
</body>
</html>
Producción:
Habilitación/deshabilitación del grupo de control: la opción deshabilitada establecida en verdadero para deshabilitar el grupo de control. Por defecto el valor es falso. En el siguiente código, agregue otro grupo de control con dos botones de radio que habilitarán o deshabilitarán el grupo de control principal. Esto también muestra el código para desactivar el grupo de control.
Ejemplo 3:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>disabled option true or false</h2>
<div class="my_games_control_group">
<label for="radio_1">Men</label>
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women</label>
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official</label>
<input type="checkbox" name="official" id="official">
<button id="apply">Apply</button>
</div>
<br><br><br>
<div id=display>Display</div>
<br> Set the Disabled option
<div class='radio_selection'>
<label for=sel_radio_1>True</label>
<input type='radio'
name='r_disabled'
id='sel_radio_1'
value=true>
<label for=sel_radio_2>False</label>
<input type='radio'
name='r_disabled'
id='sel_radio_2'
value=false
checked>
</div>
<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>
<script>
$(document).ready(function() {
$(".my_games_control_group, .radio_selection").controlgroup()
$("input:radio[name=r_disabled]").click(function() {
var selection = ($(this).val() == 'true');
$(".my_games_control_group").controlgroup(
"option", "disabled", selection);
$('#display').html(
" $( \".my_games_control_group\" ).controlgroup( \"option\", \"disabled\", "
+ selection + ")");
})
})
</script>
</center>
</body>
</html>
Producción:
Destruir el grupo de control: para destruir el grupo de control, utilice el método de destrucción. Este método destruye el grupo de control y elimina por completo su funcionalidad y devuelve todos los widgets contenidos a su estado previo a la inicialización. El método de destrucción utilizado en el siguiente código por un evento de clic de un botón, hay otro botón que vuelve a cargar la página para volver a intentarlo.
Ejemplo 4:
<!DOCTYPE html>
<html>
<head>
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Destroy methods</h2>
<div class="my_games_control_group">
<label for="radio_1">Men</label>
<input type="radio" name="type" id="radio_1">
<label for="radio_2">Women</label>
<input type="radio" name="type" id="radio_2">
<select>
<option>Cricket</option>
<option>Hockey</option>
<option>Tennis</option>
<option>Football</option>
</select>
<label for="official">Official</label>
<input type="checkbox" name="official" id="official">
<button id="apply">Apply</button>
</div>
<button id=my_button>Destroy</button>
<a href=''>
<button type='button'>Try again : Refresh</button>
</a>
<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>
<script>
$(document).ready(function() {
$(".my_games_control_group").controlgroup({})
$('#my_button').click(function() {
$(".my_games_control_group").controlgroup("destroy");
})
})
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mayeshmohapatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA