You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Huom

Confluence yliajaa joitakin tyylejä, joten mikäli jokin näyttää omituiselta, katso esimerkkiä demo-ympäristössä. Korjataan myöhemmin jos koetaan tarpeelliseksi.

 

Esimerkki:

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

Esimerkki:

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

All Bootstraps helper classes are in use and the examples can be found from the Documentation.

Here's a few useful helpers listed

  • pull-left floats element to the left
  • pull-right floats element to the right
  • center-block makes element display as a block and centers it
  • clearfix clear floats
  • show force show
  • hidden force hide

Katso myös: Bootstrap ja Eduplan GUI 

Esimerkki:

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

Esimerkki:

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

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

Esimerkki:

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

  • No labels
You must log in to comment.