JqueryUI - Alternar classe
Este capítulo irá discutir o switchClass()método, que é uma nova classe útil para manipulação. O método switchClass () move de uma classe CSS de uma classe CSS para outra, animando a transição de um estado para o outro.
Sintaxe
Adicionado na versão 1.0 do jQueryUI
o switchClass() método tem sua sintaxe básica da seguinte maneira -
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | removeClassName Esta é uma String e representa o nome da classe CSS, ou lista delimitada por espaços de nomes de classes, a ser removida. |
| 2 | addClassName É do tipo String e representa um ou mais nomes de classe (separados por espaço) a serem adicionados ao atributo de classe de cada elemento correspondido. |
| 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 os elementos descendentes.
.switchClass( removeClassName, addClassName [, options ] )| Sr. Não. | Parâmetro e Descrição |
|---|---|
| 1 | removeClassName Esta é uma String e representa o nome da classe CSS, ou lista delimitada por espaços de nomes de classes, a ser removida. |
| 2 | addClassName É do tipo String e representa um ou mais nomes de classe (separados por espaço) a serem adicionados ao atributo de classe de cada elemento correspondido. |
| 3 | options Isso representa todas as configurações de animação. Todas as propriedades são opcionais. Os valores possíveis são -
|
Exemplos
O exemplo a seguir demonstra o uso do método switchClass () .
<!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>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>Vamos salvar o código acima em um arquivo HTML switchclassexample.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 Mudar de classe para ver o efeito das classes na caixa.