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

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-default" data-dismiss="modal">Sulje</button>
            <button type="button" class="btn btn-primary">Tallenna</button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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:

  <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

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ää.

<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

<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