...
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 - - options
- jos funktio, käytetään primääritoiminnon callbackina
- 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
- extraBtns
- 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
Inline
Code Block | ||||
---|---|---|---|---|
|
...
<button onclick="egdialog('dialogin id')">Avaa</ |
...
button>
|
Ajax
Code Block | |||
---|---|---|---|
|
...
|
...
<button onclick="egdialog('dialogin id', 'url josta sisältö ladataan')">Avaa</ |
...
button>
|
HTML-rakenne
Code Block | |||||
---|---|---|---|---|---|
|
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
| |
<!-- jos et halua animaatiota, poista luokka fade -->
<div id="myModal" class="modal fade">
<!-- kokona yleensä small tai full, poikkeustilanteita varten katso kokotaulukko alempaa -->
<div |
...
class="modal-dialog |
...
small"> <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</ |
...
</
div
>
...
h4> </div> <div class="modal-body"> |
...
<
p
>Sisältö</
p
>
</
div
>
...
<p>Sisältö</p> </div> <!-- halutut toimintonapit, yleensä ainakin Tallenna ja Sulje --> <div class="modal-footer"> |
...
<button type="button" class="btn btn-primary">Tallenna</button> <button type="button" class="btn btn- |
...
link" data-dismiss="modal">Sulje</ |
...
button> <!-- valinnaiset toimintonapit, voidaan antaa extraBtns-option kautta --> <div class="secondary-buttons"> <button type="button" class="btn btn- |
...
</
div
>
...
default">Jokin muu toiminto</button> </div> </div> </div><!-- /.modal-content --> |
...
</div><!-- /.modal-dialog --> </div><!-- /.modal |
...
--> |
...
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
...
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
Dialogille luodaan oletuksena primääritoiminnon nappi (Tallenna) sekä sulkemisnappi.
- primääritoiminto
- sijoitetaan ensimmäiseksi, jotta on myös tab-indexissä ensimmäisenä
- luokat: btn btn-primary
- sulje
- sijoitetaan toiseksi, jotta on myös tab-indexissä toisena
- luokat btn btn-link
- valinnaiset napit
voidaan antaa optionseissa, esim:
'btns': {
'extraBtns': {
'other': {
text: "Do something"
callback: otherFunction}
}
laitetaan secondary-buttons divin sisään ja sijoitetaan viimeiseksi, jotta on tab-indexissäkin viimeisimpinä
Code Block | ||||
---|---|---|---|---|
| ||||
<div |
...
class="modal-footer"> |
...
<button type="button" class="btn btn-primary" onclick="save();">Tallenna</button> <button type="button" class="btn btn- |
...
link" data-dismiss="modal">Sulje</ |
...
button> <!-- valinnaiset toimintonapit, voidaan antaa extraBtns-option kautta --> <div class="secondary-buttons"> <button type="button" class="btn btn- |
...
default">Jokin muu toiminto</button>
</div>
</div>
|
Modalin tulee siis näyttää nappien osalta seuraavalta:
</
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
...
Code Block | ||||
---|---|---|---|---|
|
<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