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
  
  • dialogin id
• title
  • dialogin 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ä
    
    • 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

Inline

<button onclick="egdialog('dialogin id')">Avaa</button>

Ajax

<button onclick="egdialog('dialogin id', 'url josta sisältö ladataan')">Avaa</button>

HTML-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">&times</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

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ä

<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

<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