JqueryUI - Adicionar Classe

Este capítulo irá discutir o addClass(), que é um dos métodos usados para gerenciar efeitos visuais jQueryUI. O método addClass () permite animar as alterações nas propriedades CSS.

O método addClass () adiciona classes especificadas aos elementos correspondentes enquanto anima todas as mudanças de estilo.

Sintaxe

Adicionado na versão 1.0 do jQueryUI

o addClass() método tem sua sintaxe básica da seguinte maneira -

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

Sr. Não.	Parâmetro e Descrição
1	className Este é um String contendo uma ou mais classes CSS (separadas por espaços).
2	duration É do tipo Number ou String e indica o número de milissegundos do efeito. Um valor de 0 leva o elemento diretamente no novo estilo, sem progresso. Seu valor padrão é 400 .
3	easing É do tipo String e indica a maneira de progredir no efeito. Seu valor padrão é swing . Os valores possíveis estão aqui .
4	complete Este é um método de retorno de chamada chamado para cada elemento quando o efeito é concluído para este elemento.

Adicionado na versão 1.9 do jQueryUI

Com a versão 1.9, este método agora suporta uma opção filho , que também anima os elementos descendentes.

.addClass( className [, options ] )

Sr. Não.	Parâmetro e Descrição
1	className Este é um String contendo uma ou mais classes CSS (separadas por espaços).
2	options Isso representa todas as configurações de animação. Todas as propriedades são opcionais. Os valores possíveis são - duration- É do tipo Number ou String e indica o número de milissegundos do efeito. Um valor de 0 leva o elemento diretamente no novo estilo, sem progresso. Seu valor padrão é 400 . easing- É do tipo String e indica o caminho para o progresso no efeito. Seu valor padrão é swing . Os valores possíveis estão aqui . complete - Este é um método de retorno de chamada chamado para cada elemento quando o efeito é concluído para este elemento. children- É do tipo booleano e representa se a animação deve ser aplicada adicionalmente a todos os descendentes dos elementos correspondentes. Seu valor padrão é falso . queue- É do tipo Boolean ou String e representa se a animação deve ser colocada na fila de efeitos. Seu valor padrão é verdadeiro .

Exemplos

O exemplo a seguir demonstra o uso dos métodos addClass () .

Aprovando aula única

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

Vamos salvar o código acima em um arquivo HTML addclassexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Clique nos botões Adicionar Classe e Remover Classe para ver o efeito das classes na caixa.

Passando em várias classes

Este exemplo mostra como passar várias classes para o método 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>