JqueryUI - Dodaj klasę

W tym rozdziale omówimy addClass()metoda, która jest jedną z metod zarządzania efektami wizualnymi jQueryUI. addClass () pozwala na animowanie zmian we właściwościach CSS.

addClass () dodaje określone klasy do dopasowanych elementów podczas animacji wszystkich zmian stylu.

Składnia

Dodano w wersji 1.0 jQueryUI

Plik addClass() metoda ma swoją podstawową składnię w następujący sposób -

.addClass( className [, duration ] [, easing ] [, complete ] )

Sr.No.	Parametr i opis
1	className To jest ciąg zawierający jedną lub więcej klas CSS (oddzielonych spacjami).
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.

.addClass( 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 - 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 . 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 . complete - Jest to metoda wywołania zwrotnego wywoływana dla każdego elementu, gdy efekt jest kompletny dla tego elementu. children- Jest to typ Boolean i określa, czy animacja powinna być dodatkowo zastosowana do wszystkich elementów podrzędnych dopasowanych elementów. Jego domyślna wartość to false . queue- Jest to typ Boolean lub String i określa, czy umieścić animację w kolejce efektów. Jego domyślną wartością jest prawda .

Przykłady

Poniższy przykład ilustruje użycie metod addClass () .

Zaliczenie jednej klasy

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

Zapiszmy powyższy kod w pliku HTML addclassexample.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.

Zaliczenie wielu zajęć

Ten przykład pokazuje, jak przekazać wiele klas do metody 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>