Page History

...

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

  ...

  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">&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> primary">Tallenna</button> <button type="button" class="btn btn-primary">Tallenna<link" data-dismiss="modal">Sulje</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialogvalinnaiset toimintonapit, voidaan antaa extraBtns-option kautta --> </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:

  Code Block
  language html/xml title Dialogin sisällön rakenne
  <div class="modal-dialog fixed-400"> <div class="modal-content"> <div  <div class="modalsecondary-headerbuttons"> <button type="button" class="close"btn databtn-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Sulje</span></button> <h4 class="modal-title">Otsikko</h4> default">Jokin muu toiminto</button> </div> <div class="modal-body"> <p>Sisältö</p></div> </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-contentdialog --> </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

  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

  ...

  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-defaultprimary" data-dismissonclick="modal">Sulje<save();">Tallenna</button> <button type="button" class="btn btn-primarylink" onclickdata-dismiss="save();">Tallenna<modal">Sulje</button> </div> <script> <!-- valinnaiset toimintonapit, voidaan antaa extraBtns-option kautta --> <div class="secondary-buttons"> function save() { <button type="button" class="btn btn-default">Jokin muu toiminto<// savingbutton> }</div> </script>div>

  Modalin tulee siis näyttää nappien osalta seuraavalta:

  Image Added 

  Muut ominaisuudet

  "one-liner"

  ...