jQuery UI framework proporciona el método toggle() para mostrar el cambio entre mostrar u ocultar funcionalidades según el estado de los elementos seleccionados y el tipo de efecto de alternar elegido por el usuario.
Sintaxis:
(selector).toggle( effectType [, options ] [, duration ] [, complete ] )
Parámetros: este método acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:
- effectType: El tipo es string. Especifica el tipo de efecto que se utiliza para la transición de alternancia.
- opciones: El tipo es objeto . Especifica la configuración específica orientada a los efectos para las opciones de aceleración.
- duración: los tipos son número o string . Esto especifica aproximadamente cuánto tiempo debe ejecutarse el efecto de alternancia. Por ejemplo “rápido”, “lento” o valor por defecto 400 ms.
- complete: este es el método de devolución de llamada que se llama cuando se completa el efecto de alternancia.
Valor de retorno: Devuelve los elementos seleccionados con el efecto de alternar dado.
Enlaces para jQuery UI:
<enlace
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
<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>
Ejemplo 1: En el siguiente ejemplo, la funcionalidad toggle() se implementa en el código jQuery con el tipo de efecto de pulsación que se pasa como un parámetro que muestra el efecto de alternar para los elementos coincidentes. El tipo de efecto de pulsación ajusta la opacidad del elemento seleccionado en forma de encendido o apagado. ui -widget-content y ui-widget-header son las clases integradas proporcionadas por el marco jQuery UI CSS para hacer que la interfaz sea más interactiva y hermosa.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<title>jQuery UI toggle method</title>
<!--Pre-compiled libraries of jQuery UI -->
<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>
.mainDiv {
width: 550px;
height: 180px;
}
#toggleBtnId {
padding: .4em 1em;
text-decoration: none;
}
#container {
width: 300px;
height: 150px;
padding: 0.3em;
position: relative;
}
#container h3 {
margin: 0;
padding: 0.4em;
text-align: center;
}
.height{
height: 10px;
}
</style>
<script>
$(function() {
function toggleEffect() {
$( "#container" ).toggle('pulsate', 500);
};
$( "#toggleBtnId" ).click(function() {
toggleEffect();
return false;
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>jQuery UI toggle method</b>
<div class="height"></div><br/>
<div class = "mainDiv">
<div id = "container"
class = "ui-widget-content">
<h3 class = "ui-widget-header">
Toggle
</h3>
<p>
We are learning jQuery UI framework's
toggle() method! Please click button
to show and hide the above div.
</p>
</div>
</div>
<input type = "button" id = "toggleBtnId"
class = "ui-state-default"
value = "Click this" />
</body>
</html>
Producción:
Ejemplo 2: el marco de jQuery UI proporciona el método toggle() con muchas variedades de efectos visuales de alternancia como su parámetro. En el siguiente código de ejemplo, demostraremos el método con opciones de menú de cuadro combinado para seleccionar algunos tipos de efectos de alternancia. Cuando el usuario selecciona el tipo de efecto, se pasa al método toggle() para la salida, como se muestra en la imagen de salida. El programador puede escribir el código y elegir los tipos de efectos como parámetros según los requisitos de la aplicación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>
jQuery UI toggle Method with All effects
</title>
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src=
"http://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"http://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<style>
.height {
height: 10px;
}
.divClass {
width: 500px;
height: 200px;
}
#btnID {
padding: .4em 1em;
text-decoration: none;
}
#container {
width: 250px;
height: 180px;
padding: 0.5em;
position: relative;
}
#container h4 {
margin: 0;
padding: 0.3em;
text-align: center;
}
</style>
<script>
$( function() {
// Toggle the selected effect
// type by the user
function toggleEffect() {
var effectType = $( "#typesOfEffectId" ).val();
// Toggle the effect with call back
$( "#container" ).toggle( effectType, 800);
};
// Set effect from select menu value
$( "#btnID" ).on( "click", function() {
toggleEffect();
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>
jQuery UI toggle method
with all type of effects
</b>
<div class="height"></div>
<div class="divClass">
<div id="container" class="ui-widget-content">
<h4 class="ui-widget-header">Toggle</h4>
<p>
In this tutorial, we are going to
learn about jQuery UI framework
toggle method with different variety
of effects. The type of effect is
selected from combobox menu to get
different toggle effects.
</p>
</div>
</div>
<br/>
<select name="effectTypes" id="typesOfEffectId">
<option value="blind">Blind</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="shake">Shake</option>
<option value="bounce">Bounce</option>
<option value="slide">Slide</option>
</select>
<button id="btnID" class="ui-state-default">
Toggle Effect
</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