...

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
 nämä
• • • • • 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 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"

...

>&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

...

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ä

<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:

Image Added

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