...
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
...
...
| language | vb |
|---|---|
| title | Dialogin rakenne |
| collapse | true |
...
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
...
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