Dialog How To

Este componente permite criar diferentes tipos de diálogos modais:

  • info - janela simples, apenas com o conteúdo especificado
  • alert - janela com um botão de ok e com o conteúdo especificado
  • confirm - janela com botões de ok e cancel e com o conteúdo especificado

Todos os diálogos podem ser fechados através da tecla ESC, sendo o uso desta semelhante ao clique no botão de cancel.

Os diálogos que possuem botão de OK podem ser fechados com a tecla Enter, correspondendo esta acção ao clique no botão de OK.

Configuração inicial

Para utilizar este componente são necessários os seguintes ficheiros 

<script type="text/javascript" src="http://js.sapo.pt/SAPO/"></script> 
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Event/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Element/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Utility/Dimensions/0.1/"></script> 
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Dialog/1.1/"></script>


Opções

As seguintes opções são aplicáveis a todos os tipos de diálogos. Apenas a opção message é obrigatória. Todas as restantes são opcionais.

  • message - conteúdo a ser mostrado
  • width - largura
  • height - altura
  • onComplete - callback executada quando o diálogo estiver pronto. Útil para manipular conteúdos existentes no diálogo.
  • className - classe de css aplicada ao diálogo
  • elementId|DOMElement - id ou elemento do DOM. Se especificado, o diálogo aparecerá apenas sobre este elemento em vez de aparecer sobre toda a página.
  • callBackCancel - callback executada quando o diálogo é fechado com um botão de cancel (ou ESC key).


As seguintes opções são aplicáveis apenas aos diálogos alert e confirm e são todas opcionais.

  • image - imagem a ser usada no botão de OK
  • okLabel - texto a ser usado no botão de OK
  • callBack - callback executada quando o diálogo é fechado com um botão de OK (ou Enter key).


As seguintes opções são aplicáveis apenas ao diálogo de confirm e são opcionais:

  • imageCancel - imagem a ser usada no botão de cancel
  • cancelLabel - texto a ser usado no botão de cancel

Exemplos


SAPO.Component.Dialog.info("isto é uma mensagem");


ou 


SAPO.Component.Dialog.info({
    message: "isto é uma mensagem"
});


Para os outros tipos de diálogos, basta chamar os métodos correspondentes: alert ou confirm