El método show() del marco jQuery UI muestra o administra todo tipo de efectos visuales para los elementos seleccionados coincidentes cuyos estilos están diseñados en el código CSS para la interfaz de usuario.
Sintaxis:
(selector).show( effectType[, options ] [, duration ] [, complete ] );
Parámetros: Acepta un parámetro “effectType” que es el tipo de efecto visual que se va a añadir.
- effectType: el tipo es string . Especifica el tipo de efecto que se utiliza para la transición.
- opciones: El tipo es objeto. Especifica las opciones requeridas para la configuración específica para la aceleración.
- duración: los tipos son número o string . Esto especifica cuánto tiempo debe ejecutarse el efecto de animación, por ejemplo , rápido , lento o 400 ms .
- complete: este es el método de devolución de llamada que se llama cuando se completa el efecto de animación.
Valor devuelto: Devuelve los elementos seleccionados con el efecto visual 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 función show() se implementa en el código jQuery con el tipo de efecto de sacudida y el tiempo y la distancia como opciones, y una función de devolución de llamada como parámetro que muestra el efecto visual de los elementos coincidentes. La función de devolución de llamada se llama después de que el efecto se completa o se realiza en la pantalla. La función de devolución de llamada desvanece el contenedor después de completar el efecto durante el proceso.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI show() method</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>
.height {
height: 10px;
}
.divClass {
width: 400px;
height: 180px;
}
#btnID {
padding: .5em 1em;
text-decoration: none;
}
#container {
position: relative;
width: 260px;
height: 145px;
padding: 0.3em;
border: 1px solid black
}
</style>
<script>
$(function () {
function showEffect() {
// Run the show method with shake effect
$("#container").show("shake", { times: 10,
distance: 200 }, 2000, callback);
};
// Callback method
function callback() {
setTimeout(function () {
$("#container:visible")
.removeAttr("style").fadeOut();
}, 2000);
};
$("#btnID").click(function () {
showEffect();
return false;
});
$("#container").hide();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI show method </b>
<div class="height"></div>
<div class="divClass">
<div id="container">
<p>
This is jQuery UI show method demonstration,
which displays the matched elements.The
matched element will show the element with
the chosen effect in the jQuery code.
</p>
</div>
</div>
<div class="height"></div>
<button id="btnID">Show effect</button>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, la implementación simple del método show() se realiza en código jQuery con el efecto visual de rebote como parámetro. El método se aplica en el elemento «h2» de la página de la interfaz de usuario. ui-corner-all y ui-state-default son las clases integradas proporcionadas por el marco jQuery UI CSS para hacer que la interfaz de usuario sea más interactiva y hermosa.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI Show Method with bounce effect
</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<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>
#btnID {
padding: .4em 1.5em;
text-decoration: none;
}
.highlight {
color: #090;
font-family: Calibri;
font-size: 2em;
text-shadow: 2px 2px #FF0000;
}
.height {
height: 10px;
}
</style>
<script>
$(document).ready(function () {
$("h2").hide();
$("#btnID").click(function () {
// Show with bounce effect
$("h2").show("bounce", 3000);
})
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI show method with bounce effect</b>
<div class="height"></div>
<h2 class="highlight">Learning jQuery UI </h2>
<button id="btnID"
class="ui-corner-all ui-state-default">
Show effect
</button>
</body>
</html>
Producción:
Ejemplo 3: El marco jQuery UI proporciona el método show() con muchas variedades de efectos visuales como parámetro. En el siguiente ejemplo, demostraremos el método con una opción de menú de cuadro combinado para seleccionar un tipo de efecto visual por parte del usuario. Cuando el usuario selecciona el tipo de efecto, se pasa al método show() para la salida, como se muestra en la imagen de salida. El programador puede escribir el código y elegir los parámetros según los requisitos del proyecto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>jQuery UI Show 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 () {
// show the selected effect
// type by the user
function showEffect() {
var effectType = $("#typesOfEffectId").val();
// show the effect with call back
$("#container").show(effectType, 800, callback);
};
// Callback function to get original state
function callback() {
setTimeout(function () {
$("#container:visible")
.removeAttr("style").fadeOut();
}, 2000);
};
// Set effect from select menu value
$("#btnID").on("click", function () {
showEffect();
});
$("#container").hide();
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI show method with all type of effects</b>
<div class="height"></div>
<div class="divClass">
<div id="container" class="ui-widget-content ui-corner-all">
<h4 class="ui-widget-header ui-corner-all">Show</h4>
<p>
In this tutorial, we are going to learn about
jQuery UI framework show method with different
variety of effects.
</p>
</div>
</div>
<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="pulsate">Pulsate</option>
<option value="slide">Slide</option>
</select>
<button id="btnID" class="ui-state-default ui-corner-all">
show 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