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