JqueryUI - Aggiungi classe

Questo capitolo discuterà di addClass()metodo, che è uno dei metodi utilizzati per gestire gli effetti visivi di jQueryUI. Il metodo addClass () consente di animare le modifiche alle proprietà CSS.

Il metodo addClass () aggiunge classi specificate agli elementi corrispondenti mentre anima tutte le modifiche di stile.

Sintassi

Aggiunto nella versione 1.0 di jQueryUI

Il addClass() metodo ha la sua sintassi di base come segue:

.addClass( className [, duration ] [, easing ] [, complete ] )
Sr.No. Parametro e descrizione
1

className

Questa è una stringa contenente una o più classi CSS (separate da spazi).
2

duration

È di tipo Numero o Stringa e indica il numero di millisecondi dell'effetto. Un valore pari a 0 prende l'elemento direttamente nel nuovo stile, senza progresso. Il suo valore predefinito è 400 .
3

easing

Questo è di tipo String e indica il modo in cui progredire nell'effetto. Il suo valore predefinito è swing . I valori possibili sono qui .
4

complete

Questo è un metodo di callback chiamato per ogni elemento quando l'effetto è completo per questo elemento.

Aggiunto nella versione 1.9 di jQueryUI

Con la versione 1.9, questo metodo ora supporta un'opzione figli , che animerà anche gli elementi discendenti.

.addClass( className [, options ] )
Sr.No. Parametro e descrizione
1

className

Questa è una stringa contenente una o più classi CSS (separate da spazi).
2

options

Questo rappresenta tutte le impostazioni di animazione. Tutte le proprietà sono opzionali. I valori possibili sono -

  • duration- È di tipo Numero o Stringa e indica il numero di millisecondi dell'effetto. Un valore pari a 0 prende l'elemento direttamente nel nuovo stile, senza progresso. Il suo valore predefinito è 400 .

  • easing- Questo è di tipo String e indica il modo in cui progredire nell'effetto. Il suo valore predefinito è swing . I valori possibili sono qui .

  • complete - Questo è un metodo di callback chiamato per ogni elemento quando l'effetto è completo per questo elemento.

  • children- È di tipo booleano e indica se l'animazione deve essere applicata in aggiunta a tutti i discendenti degli elementi corrispondenti. Il suo valore predefinito è false .

  • queue- È di tipo Boolean o String e rappresenta se posizionare l'animazione nella coda degli effetti. Il suo valore predefinito è vero .

Esempi

L'esempio seguente mostra l'uso dei metodi addClass () .

Passaggio in classe singola

<!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>

Salviamo il codice sopra in un file HTML addclassexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Fare clic sui pulsanti Aggiungi classe e Rimuovi classe per vedere l'effetto delle classi sulla scatola.

Passaggio di più classi

Questo esempio mostra come passare più classi al metodo 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>

Salviamo il codice sopra in un file HTML addclassexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato: