A caixa de diálogo de elemento de controle gráfico (também chamado dialog box, ou message box) é uma pequena janela que comunica informações para o usuário e solicita ou não uma resposta.
Caixas de diálogo são classificadas como "restrita (modal)" ou "sem janela restrita (modeless)", dependendo se eles bloqueiam a interação com o software que iniciou o diálogo. O tipo de caixa de diálogo exibida é dependente da interação de usuário desejada.
O plugin allSIGE MessageBox foi criado com o propósito de facilitar a interação de usuários com caixas de diálogos, divindo as aplicações .js de messagem em um único plugin.
Para a criação das configurações do plugin, é difinido uma hierarquia padrão para todas as configurações possíveis. São elas:
boxTitle.$.allSIGEDynamicMessageBoxSettings. Se mesmo assim não for encontrado um valor, o plugin assumirá um valor padrão para o título do box.
Para o funcionamento da DOC, será adotada a seguinte configuração padrão pelo plugin (lembrando que qualquer uma dessas configurações podem ser alteradas na chamada da função do plugin)
A configuração não é obrigatória inicialmente. Ela será usada apenas para uma configuração padrão entre todas as janelas de mensagens, para que não exista a necessidade de informar a mesma configuração para todas as mensagens exibidas. Tomando essa configuração de exemplo, se executarmos agora uma chamada de função do plugin, informando apenas um paramêtro. O resultado será !
Todas as demais configurações como botões, estilo do modal, tamanho do modal, etc... assumem um padrão se não definidos.
Exemplo básico de mensagem com as configurações padrões definidas no plugin.
Mensagem em que não se fecha ao se clicar fora da caixa, os botões são posicionados ao lado oposto do padrão e o efeito de entrada do box da modal é do tipo 'zoomIn'.
Mensagem em que o box de mensagem recebe o tamanho LG, o título padrão das mensagens é substituido por outro definido na chamada da função e todos os efeitos de transição tanto do modal quanto da box message são modificados.
Mensagem em que o box de mensagem recebe o tamanho LG que contem 3 controles. Um link, que abre uma nova aba para o google, um botão que executa uma função personalizada no evento 'onclick' e outro botão que apenas fecha a message box.
| PROPRIEDADE | VALORES | PADRÃO | EXEMPLO |
|---|---|---|---|
| boxType | none, alert, error, info, success | none | |
| boxSize | xs, sm, md, lg, full, ou qualquer outra medida CSS. Ex: 115px | md | |
| boxTitle | texto do título. | allSIGE MessageBox | |
| boxMessage | mensagem ou html partial do modal. | ||
| boxButtonAlign | center, left, right | right | |
| topPosition | medida css | 100px | |
| boxShowIcon | true, false | false | |
| boxTypeIcon | "none" : { type: "ico", val: "fa fa-close" }, "error" : { type: "img", val: "error.png" }, |
||
| boxShowHeaderControls | true, false | true | |
| closeOnClickModal | true, false | true | |
| boxAutoClose | { timeout: 0, message: "Closing in %s% seconds..." } | ||
| effects | { modalIn: "fadeIn", modalOut: "fadeOut", boxIn: "fadeInDown", boxOut: "fadeOutUp" } | ||
| defaultStyle | style name. Ex: ".style",".myStyle" | style01 | |
| boxAlternateReturn | { selector: "", close: true } | ||
| boxHeaderButtons | { return: "OK", close: true, iconClass: "fa fa-close", props: { element: "li", attribs: { } } } | ||
| boxButtons | { label: "", class: "btn", return: "OK", close: true, iconClass: "", props: { element: "button", attribs: { } } } | ||
| boxButtonDefaultPosition | int | 1 | |
| onSuccess | Function | ||
| onBeforeShow | Function | ||
| onAfterShow | Function | ||
| onBeforeClose | Function | ||
| onAfterClose | Function |