Alternar classe 

Alterna,

inserindo ou removendo

, em cada execução, uma classe CSS

ao componente (elemento)

Parâmetros

Nome

Tipo

Doc

selecionado em um formulário. Este bloco utiliza o método toggleClass do jQuery, consulte a documentação oficial para mais detalhes.

Image Added

Figura 1 - Bloco Alternar classe

Compatibilidade

• Bloco cliente: cronapi.screen.toggleClass()
• Bloco servidor: cronapi.screen.toggleClass() - executado a partir da chamada do bloco cliente.

Retorno

Bloco não possui retorno.

Parâmetros

Obter identificador

Identificador (id) do componente que terá a classe CSS alternada. Para selecioná-lo é necessário vincular o bloco de programação a um formulário de referência, confira no tópico Propriedades do Blockly da documentação Bloco de Programação.

• Posição: 1
• Inglês: Get Identifier
• Tipo: Objeto / Object
• Exemplo: "crn-textinput-290034"

Valor do atributo

Recebe o nome da classe CSS, sem o

símbolo de ponto no começo do nome.

Exemplo: style6090 

Compatibilidade

Image Removed Servidor

Image Removed Cliente

Exemplo

ponto (.) inicial, que será alternada no componente.

• Posição: 2
• Inglês: Attribute value
• Tipo: Texto / String
• Exemplo: "style6090"

Exemplo

A função a seguir apresenta um exemplo de uso do bloco Alternar classe. Após vincular um formulário de referência nas configurações do bloco, a função "AlternandoClasse" (Figura 1) recebe o bloco Alternar classe e seus parâmetros estão configurados da seguinte forma:

• Obter identificador: nome da propriedade Identificador do componente que será utilizado;
• Valor do atributo: Classe CSS que será definida inserida ou removida do componente (Sem o ponto antes do nome da classe).

Image RemovedFigura 1 - Bloco Definir visibilidade

A função acima é atribuída ao evento Ao Clicar do botão "Alternar Classe" (Figura 1.1) na aplicação. O componente Entrada de texto alternará a cada clique, inserindo ou retirando a classe do componente. Nesse exemplo, a classe "style6070" muda a cor de fundo do componente (Figura 1.1).

Image Removed

blockly, selecionamos, no parâmetro Obter identificador do bloco, o identificador (id) do componente entrada de texto presente no formulário. Em seguida, no parâmetro Valor do atributo, inserimos a classe CSS "style6090", que pode ser visualizada na Figura 2.1.

Image Added

Figura 2 - Exemplo de uso do bloco Alternar classeFigura 1.1 - Alternando Classe CSS

Abaixo, segue o estilo CSS que foi utilizado no exemplo, ele pode ser configurado na aba Estilo, para mais detalhe presente no menu lateral do editor de views. Para mais detalhes de configuração, acesse a documentação sobre Estilo - CSS.

Image RemovedImage Added

Figura 2.1 .2 - Estilo CSS utilizado

A imagem abaixo exibe o resultado de execução da função da Figura 2, a qual foi associada ao evento "Ao clicar" do botão "Alternar Classe". Após clicar no botão, a função é executada e a classe CSS "style6090" será adicionada ao componente entrada de texto, que terá sua cor de fundo alterada (destaque 1 da Figura 2.2). Ao clicar novamente no botão, a classe CSS é removida e o componente retorna a seu estado inicial (destaque 2) e, assim, a cada clique do botão a classe CSS é alternada.

Image Added

Figura 2.2 - Resultado de execução da função da Figura 2