Dialog / modal
- käytetään Bootstrapin modalia
- onko jossakin tarvetta ei-modaalille?
- kutsu Eduplan GUIn omalla egdialog-funktiolla
Käyttökohteet
- muokkausnäkymä (full)
- näkymistä tehtävät monimutkaisemmat toiminnot, esim. listauksesta avattavat toimintoikkunat
- ilmoitukset ja varoitukset (alert)
- varmistus (confirm)
Dialogin alustaminen ja avaaminen
egdialog(id, url, options)
- parametrit
- id
- dialogin id
- url
- url, josta ladataan sisältö
- false, jos halutaan antaa optionsille arvoja, mutta dialogin sisältö on inlinena
- options - muut asetukset, joita voidaan myös myöhemmin lisätä
- title
- dialogin otsikkoteksti, oletuksena id, joten "pakollinen"
- size
- dialogin koko, oletuksena "full"
btns
extraBtns
- muut kuin tallennus (primary) ja close
btnTexts
close, oletuksena Close
- primary, oletuksena Save
- nämä annetaan kieleistettynä
- style (muuttaa header-palkin värin)
- success
- error
- info
- warning
- animation
- oletus true (fade-luokka wrapperille)
- appendTo
- elementti, johon dialogi liitetään
- oletuksena $(".e").first(), jotta Eduplan GUI tulee käyttöön
- parametrit
Inline
Dialogin kutsu (inline)
< button onclick = "egdialog('dialogin id')" >Avaa</ button > |
Ajax
Dialogin kutsu
< button onclick = "egdialog('dialogin id', 'url josta sisältö ladataan')" >Avaa</ button > |
HTML-rakenne
Dialogin rakenne
Jos parametri url annetaan egdialog() luo divin annetulla id:llä .e -luokan sisälle, jotta Eduplan GUI tyylit ovat käytössä. Silloin ylläolevan rakenne-esimerkin uloin div jätetään pois. Ladattavan sisällön tulee olla rakenteeltaan seuraavanlainen:
Dialogin sisällön rakenne
< div class = "modal-dialog fixed-400" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data-dismiss = "modal" >< span aria-hidden = "true" >×</ span >< span class = "sr-only" >Sulje</ span ></ button > < h4 class = "modal-title" >Otsikko</ h4 > </ div > < div class = "modal-body" > < p >Sisältö</ p > </ div > < div class = "modal-footer" > < button type = "button" class = "btn btn-default" data-dismiss = "modal" >Sulje</ button > < button type = "button" class = "btn btn-primary" >Tallenna</ button > </ div > </ div > <!-- /.modal-content --> </ div > <!-- /.modal-dialog --> |
Dialogin koko
Dialogin kokoon pystyy vaikuttamaan .modal-dialog diville annettavilla luokilla. Seuraavassa on listattu käytössä olevat luokat ja niiden määrittelemät koot
Luokan nimi | Koko | Luokan nimi | Koko | Luokan nimi | Koko | ||
---|---|---|---|---|---|---|---|
pct-10 | 10% | fixed-100 | 100px | small | 350px | ||
pct-20 | 20% | fixed-200 | 200px | full | 95% | ||
pct-30 | 30% | fixed-300 | 300px | ||||
pct-40 | 40% | fixed-400 | 400px | ||||
pct-50 | 50% | fixed-500 | 500px | ||||
pct-60 | 60% | fixed-600 | 600px | ||||
pct-70 | 70% | fixed-700 | 700px | ||||
pct-80 | 80% | fixed-800 | 800px | ||||
pct-90 | 90% | fixed-900 | 900px | ||||
maksimileveys 95% |
Käyttökohteet:
- muokkausnäkymissä käytetään full-tyyliä, jotta saadaan mahdollisimman paljon tilaa lomakkeelle näytöllä
- ilmoitus/varoitus/varmistus-ikkunoissa käytetään small
Dialogin toimintonappulat
Toiminnot ja niiden napit tulee olla ladattavan sisällön mukana, jotta dialogi on käytettävissä mistä tahansa kutsuttaessa. Napeissä käytetään Bootstrap-tyylejä ja ensijainen nappi sijoitetaan oikeanpuoleiseksi ja sille anntetaan luokka btn-primary. Sulje-toiminnolle ei tarvita erillistä metodia, data-attribuutti dismiss=modal riittää.
Dialogin toiminnot
< div class = "modal-footer" > < button type = "button" class = "btn btn-default" data-dismiss = "modal" >Sulje</ button > < button type = "button" class = "btn btn-primary" onclick = "save();" >Tallenna</ button > </ div > < script > function save() { // saving } </ script > |
Muut ominaisuudet
"one-liner"
- tyyli ilmoitusikkunan sisällölle, jossa on vain vähän tekstiä (yksi rivi) ja teksti halutaan keskittää ikkunan sisältöön
One line alert
< div class = "modal-body" > < div class = "one-liner" >This is an error alert!</ div > </ div > |
Bootstrap
Lisää ominaisuuksia Bootstrapin dokumentaatiosta http://getbootstrap.com/javascript/#modals