Dialog / modal
- käytetään Bootstrapin modalia
- 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, title, url, options)
- id
- title
- url
- url, josta ladataan sisältö
- false, jos halutaan antaa optionsille arvoja, mutta dialogin sisältö on inlinena
- options
- jos funktio, käytetään primääritoiminnon callbackina
- muut asetukset, joita voidaan myös myöhemmin lisätä
- dialogin otsikkoteksti, oletuksena id, joten "pakollinen"
- dialogin koko, oletuksena "full"
- extraBtns
- muut kuin tallennus (primary) ja close
- btnTexts
- close, oletuksena Close
- primary, oletuksena Save
- nämä annetaan kieleistettynä
- style (muuttaa header-palkin värin)
- 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 |
---|
language | html/xml |
---|
title | Dialogin kutsu (inline) |
---|
|
<button onclick="egdialog('dialogin id')">Avaa</button>
|
Ajax
Code Block |
---|
language | html/xml |
---|
title | Dialogin kutsu |
---|
|
<button onclick="egdialog('dialogin id', 'url josta sisältö ladataan')">Avaa</button>
|
HTML-rakenne
Code Block |
---|
language | vb |
---|
title | Dialogin rakenne |
---|
collapse | true |
---|
|
<!-- 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</h4>
</div>
<div class="modal-body">
<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-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
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 | large (oletus) | max-width 900px |
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
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 |
---|
language | html/xml |
---|
title | Dialogin toiminnot |
---|
|
<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:
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 |
---|
language | html/xml |
---|
title | 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