Page History

Modaalidialogin voi avata funktiolla egdialog. Dialogi voi saada sisältönsä sivulle upotetusta HTML:stä, tai ladata sen AJAXilla.

Sivulle upotetusta sisällöstä muodostetaan dialogi antamalle egdialogille parametriksi sisällön sisältävän elementin id:

function egdialog(id)

AJAX-versio dialogista ottaa useita optioita:

function egdialog(id, title, url, callback)
TAI
function egdialog(id, title, url, options)

Ensimmäinen parametri, id, on luotavan dialogielementin id. Sivulla ei tarvitse olla kyseisellä id:llä varustettua elementtiä jo valmiiksi.

Toinen parametri, title, määrittää dialogin otsikon.

Kolmas parametri, url, kertoo mistä osoitteesta dialogin sisältö ladataan.

Neljäs parametri on poikkeuksellinen: se voi olla tyypiltään joko funktio tai olio. Jos parametri on tyypiltään funktio, kyseistä funktiota kutsutaan kun käyttäjä klikkaa dialogilla oletusarvoisesti olevaa tallennuspainiketta. Jos parametri ei ole funktio, sen oletetaan olevan olio joka kuvaa tarkemmin millainen dialogin halutaan olevan. Alla on kuvattu dialogin oletusarvoiset optiot:

var defaultOptions = {
   id       : id,        // Dialogielementin id ja...
   title    : title,     // ...dialogin otsikko tulevat egdialogin parametreista
   size     : "large",
   style    : "",
   backdrop : "static",
   btns:   {
      extraBtns : {},
      close: {
         text: "Sulje",
         callback: false
      },
      primary: {
         text: "Tallenna",
         callback: callback // Jos neljäntenä parametrina annetaan callback-funktio, se asetetaan primääripainikkeelle
      }  
   },
   animation:      true,
   appendTo:       $(".e").first()
};

Jos haluat avata AJAX-dialogin ilman primääripainiketta - käytännössä siis Tallenna-painiketta, kyseinen painike voidaan ylikirjoittaa seuraavalla tavalla:

var options = {
  btns: {
    primary: false
  }
};
egdialog("id", "Otsikko", "http://...", options);

Yllä oleva options-olio ylikirjoittaa oletusasetuksia siten että primääripainikkeen kuvaus korvautuu falsella, jolloin se jätetään dialogista pois.

Esimerkki:

http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#dialog

Dialogi ajaxilla:

http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#dialog-ajax