Crowl::UI::Wimp::Windows

Vensters bouwen in Crowl

1. Link het javascriptbestand.
Absolute pad: icarosp/ui/crowl.modals/jq.crowl.modal.js

2. Voeg een link toe waarmee je het venster wil openen:

<a href="inhoudvenster.html" class="OpenWin">Open</a>

Andere mogelijkheden:

<p data-content="Deze inhoud moet in het venster getoond worden" class="OpenWin">Inhoud van de alinea waarop kan geklikt worden.</p>

3. Voeg het javascript toe:

$(".OpenWin").jqCrowlModal();

$(".OpenWin").jqCrowlModal({
     width:"80vw",
     height:"80vh",
     background:"white",
     animation:"bigEntrance",
     roundedCorners: "4px",
     shadow:true 
});

$(".OpenWin").jqCrowlModal({
      events: "click contextmenu" 
});

$(".OpenWin").jqCrowlModal({
     location: "centercenter" 
});

$(".OpenWin").jqCrowlModal({
     buttons: {
         closemodal: false /*default*/,
         submit: true /*default*/,
         cancel: false /*default*/
     },     
     buttontext: {
         submit: "OK",
         cancel: "ANNULEER"
     },
     onSubmit: function(){
         /*Uw code*/
     },
     onCancel: function(){
         /*Uw code*/
     },
     onClose: function(){
         /*Uw code*/
     } 
});

Andere opties

• Stijl en opmaak:
• menubaralign (string: left, right)
• color (string colorcode): tekstkleur
• customclass (string): CSS-stijlklasse
• buttonClass (string): CSS-stijlklasse voor OK/Cancel-knop
  
  Automatisch verbergen:
• autohide (boolean)
  
• autohidetime (number: millisconden)
  
• remove (boolean): verbergen als de muis een bepaalde actie uitvoert op het trigger-element
• removeEvent (js-event): mouseout (kies uiteraard een andere event dan het trigger-event)

Overlay:
overlay (boolean)
overlaybg (string: HTML-color)

• Methods:
  onOverlayClick (function): trigger bij het klikken op de "overlay"-achtergrond
• beforeOpen (function): trigger voor het venster opent
• onOpen (function): trigger bij het openen van een venster
• onLoaded (function): trigger wanneer de data in het modal-venster zijn ingelezen.
  onAutoHide (function): trigger als het venster automatisch is verborgen.
• beforeAppend: function(e){}: functie wordt uitgevoerd vooraleer de "modal" wordt toegevoegd.
• dynamicURL: function(e){}: oproepen van externe url met XHR-request
• onClose: function(e){}: trigger wanneer de modal wordt afgesloten
  
• onSubmit: function(e){}: trigger wanneer de modal wordt afgesloten met de "ok"-knop.
• onCancel: function(e){}: trigger wanneer de modal wordt afgesloten met de "cancel"-knop
  onOverlayClick: function(e){}: trigger wanneer de gebruiker op de "overlay"-laag klikt.

Triggerelement

• this.triggerelement: in een method opvragen met elke element de modal is geactiveerd
• this.modalid: het unieke id van het venster opvragen in een method

• 
  Muis:
• followmouse (boolean): Het venster volgt de muisbeweging. Werkt enkel bij muisposities (mouseleft, mouseright, mousetop, mousebottom). Standaardwaarde "false".
  
  Voorbeeld met "overlay-background":
• 
  

Inhoud van het vensters

1. Via een HREF-attribuut bij een link. Dit kan een "externe pagina" zijn of een onderdeel uit de pagina zelf (met een bepaalde id).

<a href="inhoudvenster.html" class="OpenWin">Open</a>

<a href="#inhoud" class="OpenWin">Open</a>

Wanneer geen HREF-attribuut is voorzien, kijkt het script naar een data-content-attribuut.

2. Via een data-content-attribuut:

<p data-content="Deze inhoud moet in het venster getoond worden" class="OpenWin>
      Inhoud van de alinea waarop kan geklikt worden. 
</p>

Wanneer geen HREF- en geen data-content-attribuut is voorzien, moet de content via javascript worden ingesteld. Zoniet zal er geen venster weergegeven worden.

4. Via javascript: 

De tekst kan rechtstreeks geplaatst worden:

$(".OpenWin").jqCrowlModal({
       width:"80vw",
       height:"80vh",
       content: "Dit is de tekst" 
});

• Een extern bestand ophalen (adres voorafgegaan door url:):

$(".OpenWin").jqCrowlModal({
       width:"80vw",
       height:"80vh",
       content: "url:inhoud.html" 
});

Waarschuwing 

Drie parameters:

1. De boodschap.

2. De positie op het scherm.

3. De weergavetijd in milliseconden.

CrowlWarning("Dit is de allerlaatste keer!", "topright", 2000);

Bevestigingsvenster

Parameters:

1. De boodschap.

2. Een functie die moet uitgevoerd worden na de bevestiging.

CrowlConfirm("U stort uw spaargeld onmiddellijk op mijn rekening", function(){
     alert("Te laat"); 
});

Melding

Twee parameters:

1. De boodschap.

2. Positie op het scherm.

CrowlNotification("Wat uitleg over het gebruik", "bottomleft");

Tooltips

$("a").jqCrowlTooltips("title", "mouseleft");