Las clases y métodos del marco jQuery UI definitivamente han mejorado los métodos jQuery toggle() y toggleClass() haciéndolo más interactivo para usuarios y desarrolladores. jQuery UI proporciona el método toggleClass() incorporado que administra los efectos de alternancia visual agregando o eliminando clases CSS para elementos coincidentes o seleccionados. Ayuda a cambiar de un estado de transición CSS a otro manteniendo todos los cambios de estilo en el código jQuery.
Sintaxis:
$(selector).toggleClass(className [, switch ] [,
duration ] [, easing ] [, complete ] )
o
$(selector).toggleClass(className [, switch ] [, options])
o
$(selector).toggleClass([state] )
Parámetros: Acepta un parámetro “className” que es el nombre de la clase que se va a agregar, alternar o quitar para los elementos seleccionados. El tipo de «className» es string . Más de una clase están separadas por espacios.
Opciones:
- interruptor: el tipo es booleano . Ayuda al método toggleClass( ) a cambiar entre agregar clase o eliminar clase dependiendo de los valores «verdadero» o «falso».
- duración: esta opción le permite elegir la duración del tiempo para el efecto de alternancia visual en milisegundos. Los tipos son número o string . El valor predeterminado es 400 y los valores posibles son “rápido”, “lento”, “normal”.
- relajación: El tipo es string . Esta opción menciona qué tipo de relajación o progreso se requiere para el efecto de alternancia. El valor predeterminado es «swing» para transiciones suaves básicas.
- complete: este es el método de devolución de llamada llamado cuando se completa el efecto de alternar para los elementos seleccionados. Las funciones de devolución de llamada se pueden utilizar para gestionar las validaciones de los usuarios.
Valor devuelto: Devuelve los elementos seleccionados alternando nueva clase.
Ejemplo 1: El siguiente ejemplo demuestra el método toggleClass() en la sección de script. Muestra el efecto de alternar agregando y eliminando la clase «newToggleClass» al elemento contenedor mediante un evento de clic de botón.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery UI toggleClass</title>
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.divID {
width: 360px;
height: 140px;
position: relative;
background: green;
border: 1px solid black;
}
.height {
height: 10px;
}
#btnId {
padding: .6em 1em;
text-decoration: none;
}
#container {
position: relative;
width: 250px;
padding: 1em;
letter-spacing: 0;
font-size: 1.0em;
color: white;
}
.newToggleClass {
text-indent: 30px;
letter-spacing: .5em;
width: 360px;
height: 90px;
padding: 10px;
margin: 10px;
font-size: 1.0em;
}
</style>
<script type="text/javascript">
$(function() {
$("#btnId").on("click", function() {
$("#container").toggleClass("newToggleClass", 3000);
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b class="highlight">jQuery UI toggleClass method </b>
<div class="height"> </div>
<br>
<div class="divID ui-corner-all">
<div id="container" class="newToggleClass">
In this section we are learning jQuery UI
framework's toggleClass() method. It toggles
between adding or removing classes for selected elements.
</div>
</div>
<div class="height"> </div>
<br>
<button id="btnId"
class="ui-state-default ui-corner-all">
Toggle Effect
</button>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el método toggleClass() agregando y eliminando varias clases, a saber, «estilos de fuente», «relleno» y «borde» al elemento paraId mediante un evento de clic de botón.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery UI toggleClass</title>
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.font-styles {
background: red;
font-size: 2em;
width: 350px;
}
.padding {
padding: 1em;
}
.border {
border: 1px solid black;
border-radius: 25px;
}
#paraId {
width: 350px;
height: 150px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.btnClass').click(function() {
$("#paraId").toggleClass(
"font-styles padding border", 2500);
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b class="highlight">jQuery UI toggleClass method </b>
<div class="height"> </div>
<br>
<p id="paraId">Toggling GFG website </p>
<button class="btnClass">Click this</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA