JqueryUI - Usuń klasę
W tym rozdziale omówimy removeClass(), która jest jedną z metod zarządzania efektami wizualnymi jQueryUI. removeClass () usuwa zastosowane klasy z elementów.
removeClass () usuwa określone klasy do dopasowanych elementów podczas animowania wszystkich zmian stylu.
Składnia
Dodano w wersji 1.0 jQueryUI
Plik removeClass() metoda ma swoją podstawową składnię w następujący sposób -
.removeClass( className [, duration ] [, easing ] [, complete ] )| Sr.No. | Parametr i opis |
|---|---|
| 1 | className To jest łańcuch zawierający jedną lub więcej klas CSS (oddzielonych spacjami) do usunięcia. |
| 2 | duration Jest to typ Number lub String i wskazuje liczbę milisekund efektu. Wartość 0 przenosi element bezpośrednio w nowym stylu, bez postępu. Jego domyślna wartość to 400 . |
| 3 | easing Jest to typ String i wskazuje drogę do postępu w działaniu. Jego domyślną wartością jest swing . Możliwe wartości są tutaj . |
| 4 | complete Jest to metoda wywołania zwrotnego wywoływana dla każdego elementu, gdy efekt jest kompletny dla tego elementu. |
Dodano w wersji 1.9 jQueryUI
W wersji 1.9, metoda ta obecnie wspiera dzieci opcję, która będzie również elementy ożywione potomne.
.removeClass( className [, options ] )| Sr.No. | Parametr i opis |
|---|---|
| 1 | className To jest ciąg zawierający jedną lub więcej klas CSS (oddzielonych spacjami). |
| 2 |
options To reprezentuje wszystkie ustawienia animacji. Wszystkie właściwości są opcjonalne. Możliwe wartości to -
|
Przykłady
Poniższy przykład demonstruje użycie metod removeClass () .
Zaliczenie jednej klasy
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI removeClass 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>Zapiszmy powyższy kod w pliku HTML removeclassexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -
Kliknij przyciski Dodaj klasę i Usuń klasę, aby zobaczyć efekt zajęć na polu.