Lectia8 – Ferestre pop-up

Cand ne gandim la ferestre pop-up, aducem aminte de ferestrele enervante ce se deschid fara acordul nostru.

In cazul nostru ferestrele pop-up folosim mai mult pentru a confirma o actiune ( stergere, modificare) sau pentru a notifica utilizatorul ( ex: nume utilizator prea scurt – la un formular de inregistrare – ) .

In JQMF nu se face diferenta intre pagina si fereastra pop-up, pentru ca ambele exista in codul nostru HTML. Totusi ca o pagina sa devina o fereastra de tip pop-up, avem de adaugat atributul data-rel=”dialog” pentru eticheta <a>.

Exemplu1

   <a href="alt_fisier.html"
      data-rel="dialog">
         Deschide fereastra pop-up</a>

Bineinteles si pentru afisarea ferestrelor pop-up se pot adauga efecte de tranzitie.

Exemplu2: Adaugam efectul de tranzitie „slidedown”

   <a href="alt_fisier.html"
      data-rel="dialog"
      data-transition="slidedown">
         Deschide fereastra pop-up cu efectul "slidedown"</a>

Personalizare stil

Personalizarea ferestrei pop-up se poate realiza in 2 moduri:

  1. Adaugarea atributului data-theme (ex: data-theme=”e”)
  2. Modificarea fisierului CSS: De exemplu doresti sa optimizezi fereastra pentru samsung mini ce are o rezolutie de 240×320 px, poti sa suprascrii in fisierul jquery.mobile.min.css urmatorele:
    .ui-dialog .ui-header, 
    .ui-dialog .ui-content, 
    .ui-dialog .ui-footer { 
    	max-width: 240px; 
    	margin: 10% auto 15px auto; 
    }
    

Demo

V-am pregatit fisierul demo cu ferestre pop-up: Vizualizeaza DEMO .

Anunțuri

5 păreri la “Lectia8 – Ferestre pop-up”

  1. Ferestre pop-up… dar nu ai scris nicaieri ce cuprinde fisierul ‘alt_fisier.html’, care este defapt fereastra pop-up. Am gasit aici (http://jquerymobile.com/test/docs/pages/dialog.html), am dat source si… gata misterul. Gish.
    PS. Pe ‘jQueryMobile – varianta cu butoane’ (http://lazar-horea.com/jQueryMobile/) si ‘jQueryMobile2 – varianta cu lista’ (http://lazar-horea.com/jQueryMobile2/), sunt toate lectiile de pana acum (urmeaza si urmatoarele). Se pot vedea ‘live’ pe tel.

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s