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