|

|
|

|
|
|
|
|
|
## Descrição.
|
|
## Descrição
|
|
|
|
|
|
> Informações relacionadas ao sistema de Toggle Elements da Ceicom, utilizado inicialmente para mostrar/esconder fields de um formulário com base em escolha de categoria/tipo.
|
|
> Informações relacionadas ao sistema de Toggle Elements da Ceicom, utilizado inicialmente para mostrar/esconder fields de um formulário com base em escolha de categoria/tipo.
|
|
|
|
|
... | @@ -9,7 +9,7 @@ |
... | @@ -9,7 +9,7 @@ |
|
## Requisitos.
|
|
## Requisitos.
|
|
> Sistema somente disponivel para funcionamento dentro das paginas de detalhamento de dados do CMS.
|
|
> Sistema somente disponivel para funcionamento dentro das paginas de detalhamento de dados do CMS.
|
|
|
|
|
|
## Parametrôs
|
|
## Parâmetro
|
|
### **data-toggle**
|
|
### **data-toggle**
|
|
Identificador do grupo que vai sofrer alteração de visibilidade.
|
|
Identificador do grupo que vai sofrer alteração de visibilidade.
|
|
Elementos com o mesmo **data-toggle** alternam visibilidade com base no valor recebido.
|
|
Elementos com o mesmo **data-toggle** alternam visibilidade com base no valor recebido.
|
... | @@ -20,12 +20,12 @@ Atributo aplicado no **button/select** e no elemento que vai ter a visibilidade |
... | @@ -20,12 +20,12 @@ Atributo aplicado no **button/select** e no elemento que vai ter a visibilidade |
|
```
|
|
```
|
|
|
|
|
|
### **data-toggle-option**
|
|
### **data-toggle-option**
|
|
Identificador do elemento que vai mudar, geralmente este valor será o **data-toggle-val** de um **button** ou o **val** de um **select**
|
|
Identificador do elemento que vai mudar, geralmente este valor será o **data-toggle-val** de um **button** ou o **val** de um **select**.
|
|
Atributo aplicado no elemento que vai ter a visibilidade alterada.
|
|
Atributo aplicado no elemento que vai ter a visibilidade alterada.
|
|
```html
|
|
```html
|
|
<div data-toggle="grupoxxx" data-toggle-option="1" hidden>
|
|
<div data-toggle="grupoxxx" data-toggle-option="1" hidden>
|
|
```
|
|
```
|
|
Este parametro pode receber mais de 1 valor se assim desejar, neste caso o elemento será mostrado quando qualquer um dos valores indicados estiver dentro do **val/data-toggle-val** recebido.
|
|
Este parâmetro pode receber mais de 1 valor se assim desejar, neste caso o elemento será mostrado quando qualquer um dos valores indicados estiver dentro do **val/data-toggle-val** recebido.
|
|
```html
|
|
```html
|
|
<div data-toggle="grupoxxx" data-toggle-option="1,2" hidden>
|
|
<div data-toggle="grupoxxx" data-toggle-option="1,2" hidden>
|
|
```
|
|
```
|
... | @@ -38,7 +38,7 @@ Diferente de um select, um **button** não tem val, neste caso inserimos o atrib |
... | @@ -38,7 +38,7 @@ Diferente de um select, um **button** não tem val, neste caso inserimos o atrib |
|
|
|
|
|
## Descrição de funcionamento
|
|
## Descrição de funcionamento
|
|
1. O sistema aguarda por 2 tipos de eventos ```click``` em **```buttons```** e ```change``` em **```selects```**.
|
|
1. O sistema aguarda por 2 tipos de eventos ```click``` em **```buttons```** e ```change``` em **```selects```**.
|
|
2. Para eventos em ```buttons``` ele automaticamente irá procurar elementos com o mesmo grupo e manter somente o "clicado" com a classe **"active"**
|
|
2. Para eventos em ```buttons``` ele automaticamente irá procurar elementos com o mesmo grupo e manter somente o "clicado" com a classe **"active"**.
|
|
3. Na sequência o sistema percorre todo o *DOM* a procura de elementos que contenham o mesmo **data-toggle** que o item do evento, escondendo todos que tenham valor diferente do **val/data-toggle-val** do item do evento.
|
|
3. Na sequência o sistema percorre todo o *DOM* a procura de elementos que contenham o mesmo **data-toggle** que o item do evento, escondendo todos que tenham valor diferente do **val/data-toggle-val** do item do evento.
|
|
|
|
|
|
#### Estrutura
|
|
#### Estrutura
|
... | | ... | |