JqueryUI - Alternar classe

Este capítulo irá discutir o toggleClass()método, que é uma nova classe útil para manipulação. O método toggleClass () adiciona ou remove uma ou mais classes de cada elemento no conjunto de elementos correspondentes.

Sintaxe

Adicionado na versão 1.0 do jQueryUI

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

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
Sr. Não. Parâmetro e Descrição
1

className

Este é um String e representa o nome da classe CSS, ou lista delimitada por espaço de nomes de classes, a serem adicionados, removidos ou alternados.

2

switch

É do tipo Boolean e, se especificado, força o método toggleClass () a adicionar a classe se verdadeiro ou a remover a classe se for falso .

3

duration

É do tipo Number ou String e, opcionalmente, fornece lento, normal, rápido ou a duração do efeito em milissegundos. Se omitido, o método animate () determina o padrão. Seu valor padrão é 400 .

4

easing

O nome da função de atenuação a ser passada para o método animate ().

5

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 elementos descendentes.

.toggleClass( className [, switch ] [, options ] )
Sr. Não. Parâmetro e Descrição
1

className

Este é um String e representa o nome da classe CSS, ou lista delimitada por espaço de nomes de classes, a serem adicionados, removidos ou alternados.

2

switch

É do tipo Boolean e, se especificado, força o método toggleClass () a adicionar a classe se verdadeiro ou a remover a classe se for falso .

3

options

Isso representa todas as configurações de animação. Todas as propriedades são opcionais. Os valores possíveis são -

  • duration- Uma string ou número que determina por quanto tempo a animação será executada. Seu valor padrão é 400 .

  • easing- Uma string que indica qual função de atenuação usar para a transição. 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 - Este é um booleano e representa se a animação deve ser aplicada adicionalmente a todos os descendentes dos elementos correspondentes.

  • queue - É do tipo String / Boolean que indica se a animação deve ser colocada na fila de efeitos.

Exemplos

O exemplo a seguir demonstra o uso do método 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>

Vamos salvar o código acima em um arquivo HTML toggleclassexample.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 no botão Alternar para ver como as classes CSS são alteradas para o texto.