JqueryUI - Agregar clase

Este capítulo discutirá el addClass()método, que es uno de los métodos utilizados para administrar los efectos visuales de jQueryUI. El método addClass () permite animar los cambios en las propiedades CSS.

El método addClass () agrega clases específicas a los elementos coincidentes mientras anima todos los cambios de estilo.

Sintaxis

Agregado en la versión 1.0 de jQueryUI

los addClass() El método tiene su sintaxis básica de la siguiente manera:

.addClass( className [, duration ] [, easing ] [, complete ] )

No Señor.	Descripción de parámetros
1	className Esta es una cadena que contiene una o más clases CSS (separadas por espacios).
2	duration Es de tipo Number o String, e indica el número de milisegundos del efecto. Un valor de 0 toma el elemento directamente en el nuevo estilo, sin progreso. Su valor predeterminado es 400 .
3	easing Es de tipo String e indica el camino a seguir en el efecto. Su valor predeterminado es swing . Los posibles valores están aquí .
4	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.

.addClass( className [, options ] )

No Señor.	Descripción de parámetros
1	className Esta es una cadena que contiene una o más clases CSS (separadas por espacios).
2	options Esto representa todas las configuraciones de animación. Todas las propiedades son opcionales. Los valores posibles son: duration- Es de tipo Number o String, e indica el número de milisegundos del efecto. Un valor de 0 toma el elemento directamente en el nuevo estilo, sin progreso. Su valor predeterminado es 400 . easing- Es de tipo String e indica el camino a seguir en el efecto. Su valor predeterminado es swing . Los posibles valores están aquí . complete - Este es un método de devolución de llamada llamado para cada elemento cuando el efecto está completo para este elemento. children- Es de tipo booleano y representa si la animación debe aplicarse adicionalmente a todos los descendientes de los elementos coincidentes. Su valor predeterminado es falso . queue- Es de tipo booleano o String y representa si se coloca la animación en la cola de efectos. Su valor predeterminado es verdadero .

Ejemplos

El siguiente ejemplo demuestra el uso de métodos addClass () .

Pasando una sola clase

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

Guardemos el código anterior en un archivo HTML addclassexample.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 los botones Agregar clase y Eliminar clase para ver el efecto de las clases en el cuadro.

Pasando varias clases

Este ejemplo muestra cómo pasar varias clases al método addClass .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass 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>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   
   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>

Next page ↱