JqueryUI - Przełącz klasę
W tym rozdziale omówimy toggleClass()metoda, która jest użyteczną nową klasą do manipulacji. toggleClass () dodaje lub usuwa jedną lub więcej klas z każdego elementu w zestawie dopasowanych elementów.
Składnia
Dodano w wersji 1.0 jQueryUI
Plik toggleClass() metoda ma swoją podstawową składnię w następujący sposób -
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )| Sr.No. | Parametr i opis |
|---|---|
| 1 | className To jest łańcuch i reprezentuje nazwę klasy CSS lub rozdzieloną spacjami listę nazw klas, które mają zostać dodane, usunięte lub przełączane. |
| 2 | switch Jest to typ Boolean i jeśli jest określony, wymusza na metodzie toggleClass () dodanie klasy, jeśli jest true , lub usunięcie klasy, jeśli jest fałszem . |
| 3 | duration Jest to typ Number lub String i opcjonalnie zapewnia powolny, normalny, szybki lub czas trwania efektu w milisekundach. W przypadku pominięcia metoda animate () określa wartość domyślną. Jego domyślna wartość to 400 . |
| 4 | easing Nazwa funkcji krzywej dynamiki, która ma zostać przekazana do metody animate (). |
| 5 | 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.
.toggleClass( className [, switch ] [, options ] )| Sr.No. | Parametr i opis |
|---|---|
| 1 | className To jest łańcuch i reprezentuje nazwę klasy CSS lub rozdzieloną spacjami listę nazw klas, które mają zostać dodane, usunięte lub przełączane. |
| 2 | switch Jest to typ Boolean i jeśli jest określony, wymusza na metodzie toggleClass () dodanie klasy, jeśli jest true , lub usunięcie klasy, jeśli jest fałszem . |
| 3 | options To reprezentuje wszystkie ustawienia animacji. Wszystkie właściwości są opcjonalne. Możliwe wartości to -
|
Przykłady
Poniższy przykład ilustruje użycie metody toggleClass () .
<!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>
.class1 {
border-width : 10px;
border-color : grey;
background-color : #cedc98;
color : black;
}
</style>
<script>
function toggle () {
$("#para").toggleClass ("class1", 1000);
}
</script>
</head>
<body>
<button onclick = toggle()> Toggle </button>
<p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
</body>
</html>Zapiszmy powyższy kod w pliku HTML toggleclassexample.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 przycisk Przełącz , aby zobaczyć, jak zmieniają się klasy CSS dla tekstu.