JqueryUI - Clase de conmutador
Este capítulo discutirá el switchClass()método, que es una nueva clase útil para la manipulación. El método switchClass () se mueve de un CSS de una clase de CSS a otra, animando la transición de un estado a otro.
Sintaxis
Agregado en la versión 1.0 de jQueryUI
los switchClass() El método tiene su sintaxis básica de la siguiente manera:
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )| No Señor. | Descripción de parámetros |
|---|---|
| 1 | removeClassName Se trata de una cadena y representa el nombre de la clase CSS, o la lista de nombres de clases delimitada por espacios, que se eliminará. |
| 2 | addClassName Es de tipo String y representa uno o más nombres de clase (separados por espacios) que se agregarán al atributo de clase de cada elemento coincidente. |
| 3 | duration Este es de tipo Number o String y opcionalmente proporciona uno de lento, normal, rápido o la duración del efecto en milisegundos. Si se omite, el método animate () determina el valor predeterminado. Su valor predeterminado es 400 . |
| 4 | easing El nombre de la función de aceleración que se pasará al método animate (). |
| 5 | complete Este es un método de devolución de llamada llamado para cada elemento cuando el efecto está completo para este elemento. |
Agregado en la versión 1.9 de jQueryUI
Con la versión 1.9, este método es ahora compatible con un hijos opción, que también incluirá elementos animados descendientes.
.switchClass( removeClassName, addClassName [, options ] )| No Señor. | Descripción de parámetros |
|---|---|
| 1 | removeClassName Se trata de una cadena y representa el nombre de la clase CSS, o la lista de nombres de clases delimitada por espacios, que se eliminará. |
| 2 | addClassName Es de tipo String y representa uno o más nombres de clase (separados por espacios) que se agregarán al atributo de clase de cada elemento coincidente. |
| 3 | options Esto representa todas las configuraciones de animación. Todas las propiedades son opcionales. Los valores posibles son:
|
Ejemplos
El siguiente ejemplo demuestra el uso del método switchClass () .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</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>
<!-- CSS -->
<style>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>Guardemos el código anterior en un archivo HTML switchclassexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:
Haga clic en el botón Cambiar clase para ver el efecto de las clases en el cuadro.