JqueryUI - Clase de alternancia

Este capítulo discutirá el toggleClass()método, que es una nueva clase útil para la manipulación. El método toggleClass () agrega o elimina una o más clases de cada elemento en el conjunto de elementos coincidentes.

Sintaxis

Agregado en la versión 1.0 de jQueryUI

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

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

No Señor.	Descripción de parámetros
1	className 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 agregará, eliminará o alternará.
2	switch Este es de tipo booleano y, si se especifica, obliga al método toggleClass () a agregar la clase si es verdadero , o eliminar la clase si es falso .
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.

.toggleClass( className [, switch ] [, options ] )

No Señor.	Descripción de parámetros
1	className 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 agregará, eliminará o alternará.
2	switch Este es de tipo booleano y, si se especifica, obliga al método toggleClass () a agregar la clase si es verdadero , o eliminar la clase si es falso .
3	options Esto representa todas las configuraciones de animación. Todas las propiedades son opcionales. Los valores posibles son: duration- Una cadena o número que determina cuánto tiempo se ejecutará la animación. Su valor predeterminado es 400 . easing- Una cadena que indica qué función de aceleración utilizar para la transición. 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 - Este es un booleano y representa si la animación debe aplicarse adicionalmente a todos los descendientes de los elementos emparejados. queue - Es de tipo String / Boolean que indica si colocar la animación en la cola de efectos.

Ejemplos

El siguiente ejemplo demuestra el uso del método toggleClass () .

<!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>
         .class1 {
            border-width : 10px;
            border-color : grey;
            background-color : #cedc98;
            color : black;
         }
      </style>
      
      <script>
         function toggle () {
            $("#para").toggleClass ("class1", 1000);
         }
      </script>
   </head>
   
   <body>
      <button onclick = toggle()> Toggle </button>
      <p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
   </body>
</html>

Guardemos el código anterior en un archivo HTML toggleclassexample.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 Alternar para ver cómo se cambian las clases de CSS para el texto.

↰ Previous page Next page ↱