DOCSMarshal /JS

$().dmPopup()

Questo Componente permette di inserire del contenuto all'interno di una finestra a comparsa (popup).

Il seguente codice mostra come costruire il componente passandogli dei parametri ed ottenerne l'istanza per invocare successivamente dei metodi; 

<div id="container"></div>
<script>
// costruisco il dmPopup
    $('#container').dmPopup({
        contentTemplate: function(){
            return $("<div>").text("Content")
        },
        onShown: function() {
            //popup visibile
        },
        title: "MyPopup",
    });
// ottengo l'istanza del componente
    let instance = $('#container').dmPopup('instance');
    ...
// in un secondo momento, posso utilizzare l'istanza per collegarmi ad un evento
    instance.on('contentReady', function(e) { console.log(e); });
</script>

Elenco parametri

Elenco metodi

Eventi

  • contentReady
  • disposing
  • showing
  • shown
  • hiding
  • hidden
  • resize
  • resizeStart
  • resizeEnd

Descrizione parametri

title

Type: string

Permette di definire il titolo del popup

width

Type: string
Default: 80%

Permette di definire la lunghezza del popup

height

Type: string
Default: 80%

Permette di definire l'altezza del popup

showContinueButton

Type: Boolean
Default: true

Permette di visualizzare il bottone "Continua" nel footer.

continueButtonLabel

Type: string

Permette di personalizzare l'etichetta del bottone "Continua" nel footer

showCancelButton

Type: string
Default: true

Permette di visualizzare il bottone "Annulla" nel footer.

cancelButtonLabel

Type: string

Permette di personalizzare l'etichetta del bottone "Annulla" nel footer.

showCloseButton

Type: Boolean
Default: true

Permette di visualizzare il bottone di chiusura nell'header.

showExpandButton

Type: boolean
Default: true

Permette di visualizzare il bottone per espandere a tutto schermo il popup, posizionato nell'header.

showHeader

Type: boolean
Default: false (true se titolo impostato)

Permette di visualizzare l'header del popup, che può contenere titolo, i bottoni per chiudere ed espandere il componente, più eventuali bottoni personalizzati.

showFooter

Type: boolean
Default: false (true se presenti bottoni)

Permette di visualizzare il footer del popup, che può contenere i bottoni "Continua" ed "Annulla", più eventuali bottoni personalizzati.

borderRadius

Type: string
Default: 10px

Permette di personalizzare l'arrotondamento dei bordi (border radius) del popup.

doubleConfirmOnCancel

Type: boolean
Default: false

Permette di definire se si desidera richiedere una doppia conferma per la chiusura del Popup.

disposeOnHidden

Type: boolean
Default: true

Permette di definire se il popup deve essere distrutto (disposed) dopo essere stato nascosto

removeOnDisposed

Type: boolean
Default: false

Permette di definire se il contenitore html del popup deve essere rimosso una volta che il popup viene distrutto

animationDuration

Type: string
Default: 100

Permette di definire la durata in millisecondi dell'animazione di apertura e chiusura del popup

shading

Type: boolean
Default: true

Permette di definire se deve essere creato un layer apposito per il popup, oscurando ed impedendo l'interazione con il contenuto in secondo piano rispetto al popup.

shadingColor

Type: string
Default: transparent

Permette di definire il colore dello shading, ovvero il colore del layer posizionato tra il popup ed il resto della pagina per impedire l'interazione con il contenuto in secondo piano.

hideOnOutsideClick

Type: boolean
Default: false

Permette di definire se il popup deve nascondersi automaticamente se viene cliccato al di fuori dello stesso

resizeEnabled

Type: boolean
Default: true

Permette di definire se è possibile modificare le dimensioni del popup.

dragEnabled

Type: boolean
Default: true

Permette di definire se la finestra del popup può essere trascinata e spostata in un'altra posizione.

useScrollView

Type: boolean
Default: true

Permette di definire se al contenuto del popup (contentTemplate) deve essere applicato uno scorrimento verticale (ScrollView).
L'impostazione è abilitata di default, ed è utile nel caso in cui sia necessario mostrare una grande quantità di dati, permettendo all'utente finale di scorrere il contenuto verticalmente.

Nota: lo scorrimento predefinito del browser non funziona nei dmPopup, risulta quindi necessario attivare quest'impostazione nel caso in cui non si abbia gestito il caso manualmente.

contentTemplate

Type: function

Permette di definire il contenuto del popup.
È una funzione che riceve come parametro il contenitore al quale appendere i propri elementi.
Esempio:

contentTemplate: function(container) {
    return $("<div>").text("Contenuto");
}

onCancel

Type: function

È una funzione che viene richiamata alla pressione del tasto "Annulla" nel footer.

onContinue

Type: function

È una funzione che viene richiamata alla pressione del tasto "Conferma" nel footer. È possibile annullare l'operazione ritornando 'false'. Esempio di utilizzo:

onContinue: function(instance, popup, e) {
    /*
        La proprietà resetButton viene impostata a true ogni volta che viene premuto il tasto "Conferma".
        Se resetButton = true, non sarà possibile premere nuovamente il tasto di "Conferma".
        In questo esempio voglio che sia sempre sbloccato, quindi lo reimposto a false per permettere all'utente di ripremere conferma una seconda volta.
    */
    instance.resetButton = false;
    let ask = confirm("Sei sicuro?");
    return ask;
}

onBeforeClose

Type: function

È una funzione che viene richiamata prima della chiusura del popup. Alla funzione viene passato un oggetto contenente:

  • closeByContinue
  • cancel (default: false)
  • skipDoubleConfirm (default: false)
Esempio di utilizzo:
onBeforeClose: function(e) {
    e.cancel = true; //blocco il comportamento di default
}

onClose

Type: function

È una funzione che viene richiamata alla chiusura del popup.

Descrizione metodi

on

Permette di registrarsi ad un evento del popup, nonostante quest'ultimo sia già stato creato.
Richiede un parametro stringa che identifica il nome dell'evento a cui registrarsi.

off

Permette di rimuovere l'iscrizione ad un evento del popup, nonostante quest'ultimo sia già stato creato.
Richiede un parametro stringa che identifica il nome dell'evento a cui registrarsi.

show

Mostra il popup

hide

Nasconde il popup

dispose

Distrugge il popup (dispose)

repaint

Ridisegna il contenuto del popup

closePopup

Permette di chiudere il popup. Se gli viene passato il parametro 'true', ignorerà eventuali doppie conferme di chiusura.