JqueryUI - Cambia classe

Questo capitolo discuterà di switchClass()metodo, che è una nuova classe utile per la manipolazione. Il metodo switchClass () passa da una classe CSS a un'altra, animando la transizione da uno stato all'altro.

Sintassi

Aggiunto nella versione 1.0 di jQueryUI

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

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
Sr.No. Parametro e descrizione
1

removeClassName

Questa è una stringa e rappresenta il nome della classe CSS, o un elenco di nomi di classi delimitato da spazi, da rimuovere.
2

addClassName

È di tipo String e rappresenta uno o più nomi di classi (separati da spazi) da aggiungere all'attributo di classe di ogni elemento corrispondente.
3

duration

È di tipo Numero o Stringa e fornisce opzionalmente uno degli effetti lento, normale, veloce o la durata dell'effetto in millisecondi. Se omesso, il metodo animate () determina il valore predefinito. Il suo valore predefinito è 400 .
4

easing

Il nome della funzione di andamento da passare al metodo animate ().
5

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.

.switchClass( removeClassName, addClassName [, options ] )
Sr.No. Parametro e descrizione
1

removeClassName

Questa è una stringa e rappresenta il nome della classe CSS, o un elenco di nomi di classi delimitato da spazi, da rimuovere.
2

addClassName

È di tipo String e rappresenta uno o più nomi di classi (separati da spazi) da aggiungere all'attributo di classe di ogni elemento corrispondente.
3

options

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

  • duration- Una stringa o un numero che determina la durata dell'animazione. Il valore predefinito è 400 .

  • easing- Una stringa che indica quale funzione di andamento utilizzare per la transizione. 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 - Questo è un valore booleano e indica se l'animazione deve essere applicata in aggiunta a tutti i discendenti degli elementi corrispondenti.

  • queue - È di tipo String / Boolean che indica se posizionare l'animazione nella coda degli effetti.

Esempi

L'esempio seguente mostra l'uso del metodo 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>

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

Fare clic sul pulsante Cambia classe per vedere l'effetto delle classi sulla scatola.