Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
W Wiki
  • Project overview
    • Project overview
    • Details
    • Activity
  • Analytics
    • Analytics
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Members
    • Members
  • Activity
Collapse sidebar
  • Tutoriais
  • Wiki
  • Wiki
    • Cfw
  • toggle

toggle · Changes

Page history
Update toggle authored Dec 12, 2018 by Keller Kichel's avatar Keller Kichel
Show whitespace changes
Inline Side-by-side
Showing with 5 additions and 5 deletions
+5 -5
  • cfw/toggle.md cfw/toggle.md +5 -5
  • No files found.
cfw/toggle.md
View page @ 433ad5ff
![ceicom](http://www.ceicom.com.br/img/logo.png?v=1.0)
## 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.
......@@ -9,7 +9,7 @@
## Requisitos.
> Sistema somente disponivel para funcionamento dentro das paginas de detalhamento de dados do CMS.
## Parametrôs
## Parâmetro
### **data-toggle**
Identificador do grupo que vai sofrer alteração de visibilidade.
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
```
### **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.
```html
<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
<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
## Descrição de funcionamento
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.
#### Estrutura
......
Clone repository
  • Gitlab
    • Comandos
  • Hotfix
    • og:image
  • Magento
    • Htaccess
    • MagentoCronChecker
    • Robots
    • SimpleSchema
    • Soap v2 Tester
    • gitignore
  • Migração
    • leg.br
  • Padrões
    • eslint
    • prettier
  • Plugins
    • Adicionar informações extras ao texto copiado da web
  • QueryCommerce
  • Servidores
    • Cloudways
    • DnsMadeEasy
View All Pages