...

• käytetään Bootstrapin modalia
  •  onko jossakin tarvetta ei-modaalille?
• kutsu Eduplan GUIn omalla egdialog-funktiolla

...

Dialogin alustaminen ja avaaminen

egdialog(id, title, url, options)

...

• id
  

...

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

  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

  expand source 

  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

   

  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"

  ...

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

  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%

  ...

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

  Image Added

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