Logomark

allSIGE Message Box - DOCs

INFORMAÇÕES INICIAIS.

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.

CONFIGURAÇÃO INICIAL DO 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:

  1. Configuração definida na chamada da função.
  2. Configuração definida na configuração do plugin.
  3. Configuração definida na biblioteca do plugin, assumindo valores padrões.
Dessa forma, vamos imaginar uma configuração do título do plugin, que é definido pelo parâmetro boxTitle.
Caso o título da mensagem não for definida na chamada do plugin, será feita uma segunda tentativa nas configurações gerais definida na função $.allSIGEDynamicMessageBoxSettings. Se mesmo assim não for encontrado um valor, o plugin assumirá um valor padrão para o título do box.
Esse comportamento é padrão para qualquer parâmetro definido no plugin, ou seja, você pode definir todas as 'settings' padrões, e utilizar as chamadas de funções das mensagens apenas para as informções essenciais como por exemplo o título, a mensagem, os botões, etc.


DEFININDO A CONFIGURAÇÃO INICIAL

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 01



Exemplo básico de mensagem com as configurações padrões definidas no plugin.

EXEMPLO 02



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'.

EXEMPLO 03



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.

EXEMPLO 04



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.

PARÂMETROS

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