Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Jquery - Upravljanje prozorima

The jQuery Mobile tutorial - Managing windows

Upravljanje prozorima

Prozorima se može manipulisati na različite načine u jQuery Mobile:

  • kroz atribute <a> linkova, omogućavajući prozorima da se povežu jedni s drugima,

  • pomoću changePage () mеtoda definisanog na $.mobile objektu.

Mi u nastavku istražujemo dve opcije.

Upravljanje atributima linkova

Prelaz sa jednog prozora na drugi radi se preko linka koji se može predstaviti, na primer, u obliku tastera. Atributi linka mogu ukazati postupak koji će se izvršiti kada se klikne.

Link ka mejl adresi ili telefonskom broju

Počnimo od najjednostavnijeg. Želimo da pošaljemo mejl, SMS ili da uputimo poziv iz prozora naše aplikacije. Za te aktivnosti neophodne su posebne vrednosti href atributa <a> linka.

Linkovi ka mejl adresi i telefonskom broju

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Talk to Eric Sarrion : </p>

    <a href=mailto:ericsarrion@gmail.com>By mail</a><br /><br />

    <a href=tel:0625570924>By phone</a><br /><br />

    <a href=sms:0625570924>By SMS</a><br /><br />

  </div>

</div>


</body>




Link ka prozoru na istoj HTML stranici

Оvo je klasičan primer koji smo do sada mnogo puta koristili. On govori prozoru da se prikaže tako što će uključiti href linka i id of the <div> elementa za novi prozor, kojem prethodi "#" karakter (eg href="#win2").

HTML stranica koja sadrži dva prozora

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    <a href=#win2> Goto window 2 located in the same page </a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>

Link ka prozoru na drugoj HTML stranici na istom serveru

Kada se prozor nalazi na drugoj HTML stranici servera, jQuery Mobile izvodi (interno) Ajax poziv ka serveru kako bi učitao sadržaj prozora i ubacio ga u njegov tok. Oba fajla moraju biti locirana na našem serveru, inače jQuery Mobile ne može izvršiti Ajax poziv.

Index.html fajl koji sadrži prvi prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    <a href=index2.html> Goto window 2 located in index2.html </a>

  </div>

</div>


</body>

</html>

index2.html fajl koji sadrži drugi prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>


</body>

</html>

Ono što ovde treba zapaziti jeste upotreba <meta> oznake za ukazivanje na kodiranje stranice koju učita Ajax (ovde index2.html). Zapravo, dva prozora nisu locirana na istoj HTML stranici, UTF-8 podrazumevani način za Ajax zahteve koje jQuery Mobile kreira interno. Upotreba iso-8859-1 kodiranja može u ovom slučaju prikazati akcentovane karaktere za strane jezike.




Nakon klika na link, prikazuje se druga HTML stranica, uključujući i nov prozor:




Da biste razumeli kako je jQuery Mobile uspeo da učita novu HTML stranicu, upotrebite Firefox kombinovan sa Firebugom.

Pre klika na link, HTML je:



Nakon klika na link, HTML postaje sledeće:




Vidimo da je drugi <div> element (sa id win2) postao deo elemenata DOM stabla HTML stranice. To odgovara drugom prozoru, uključenom u istu index2.html stranicu. To je interno uradio jQuery Mobile uz pomoć Ajax tehnike. Zbog toga se na prvi klik na kratko pokazuje poruka o čekanju (vreme za koje se izvuče novi HTML kod sa servera i ubaci u postojeći HTML kod). Novi HTML kod se zatim učitava u konačnu stranicu, a sledećim klikovima više ne treba to učitavanje (otuda se poruka ne prikazuje sledeći put).

Obratite pažnju na to da, ako su u drugoj HTML stranici izlistani višestruki prozori, samo prvi koji je uključen na stranici jeste onaj koji je ubacio jQuery Mobile.

Hajde da se vratimo na prethodni prozor pomoću tastera “nazad” Back HTML koji prikazuje Firebug postaje:




Vidimo da je drugi prozor nestao sa DOM stabla. jQuery Mobile ga je uklonio iz memorije kako bi uštedeo memorijski prostor. Ovaj pristup važi za sve prozore koji se učitaju pomoću Ajaxa. Ako želite da zadržite prozor u memoriji uprkos nestajanju sa ekrana, jednostavno odredite data-dom-cache=true atribut <div> elementa udruženog sa ovim prozorom.

Index2.html fajl koji sadrži drugi prozor, sačuvaće se u memoriji uprkos njegovom nestanku sa ekrana

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win2 data-add-back-btn=true data-dom-cache=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>

Izgradnja prozora od strane PHP servera

Nadovezujući se na prethodni primer, pretpostavljamo da će prvi link u prozoru, koji ukazuje na PHP stranicu (lociranu na našem serveru) koja dinamički gradi prozor, biti prikazan.

Index.html fajl koji sadrži prvi prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    <a href=action.php> Goto window 2 built with action.php </a>

  </div>

</div>


</body>

</html>

action.php fajl koji gradi drugi prozor

<?
  $html = "";
  $html .= "<div data-role=page data-add-back-btn=true>";
  $html .=   "<div data-role=header>";
  $html .=     "<h1>Window 2</h1>";
  $html .=   "</div>";
  $html .=   "<div data-role=content>Window content 2</div>";
  $html .= "</div>";
  echo utf8_encode ($html);
?>

jQuery Mobile koristi Ajax da izvuče drugi prozor uključen u action.php fajl. Za to moramo upotrebiti utf8_encode () tako da se akcentovani karakteri (ako ih ima) pravilno prikažu.

Takođe obratite pažnju na to da, ako serverski kod vraća nekoliko prozora, samo će prvi prozor biti prikazan u njegovom toku.

Link ka drugoj HTML stranici lociranoj na drugom serveru

Moguće je odrediti eksternu URL stranicu u href atributu linka. To zahteva određivanje pune URL stranice (koja počinje sa http://). U tom slučaju, nova stranica se prikazuje umesto prethodne (ne uklapa se u tok prozora).

Link ka http://amazon.com

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    <a href=http://amazon.com> Goto Amazon </a>

  </div>

</div>


</body>

</html>

Kada se klikne na link, Amazon.com stranica se prikazuje umesto prozora:




Onemogućite učitavanje HTML stranice pomoću Ajaxa

Podrazumevano, kada vrednost href atributa ukazuje na HTML stranicu lociranu na serveru, jQuery Mobile vrši Ajax poziv.To ponašanje omogućava uključivanje prvog prozora opisanog na HTML stranici, u tok prozora aplikacije, kako bi se mogao vratiti prethodni prozor pomoću tastera “nazad” (back).

Moguće je, ukazujući na određene atribute u linku, promeniti takvo ponašanje.

  • data-ajax="false" znači da se ne vrši Ajax poziv. Nova HTML stranica zamenjuje sve prethodne (prethodni prozori se gube)

  • rel="external" је slično sa data-ajax="false".

  • target="a_value" оtvara novi prozor pretraživača. Prethodni prozor pretraživača sadrži prethodno prikazani prozor.

Imajte na umu da je upotreba ovih mehanizama prilično retka, jer je bolje da ostane na istoj HTML stranici i učita prozore aplikacije pomoću Ajaxa (podrazumevani mehanizam).

Prozori za dijalog

O ovom slučaju se već govorilo u prvom delu knjige (poglavlje 2). Mi ovde pokazujemo da se slojeviti prozor takođe može definisati u drugoj HTML stranici.

Index.html fajl koji sadrži prvi prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    <a href=index2.html data-rel=dialog data-transition=pop> 

      Goto window 2 located in an another HTML page </a>

  </div>

</div>


</body>

</html>

Index2.html fajl koji sadrži drugi prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win2>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>


</body>

</html>

Prozor za dijalog (definisan u index2.html) pojavljuje se kada kliknete na prvi prozor:




$.mobile.changePage (toPage, options) metod

Prethodno poglavlje je pokazalo da nam je jednostavno pisanje linkova na HTML stranici omogućilo da napravimo prelaz izmeu dva prozora, bez obzira na to da li su locirani na istoj HTML stranici ili ne.

U slučaju da želimo da upravljamo prelazom između dva prozora, jQuery Mobile nam daje $.mobile.changePage (toPage, options). Kao što i samo ime kaže, ovo je metod changePage () definisan je na $.mobile objektu.

toPage parametar (obavezno) označava prozor ili stranicu koju želite da prikažete, dok je options parametar (opciono) objekat koji opisuje opcije koje su se koristile za prikazivanje ovog prozora.

$.mobile.changePage (toPage, options) parametri metoda

Parametar

Značenje

toPage

Ukazuje na prozor ili URL stranicu koju želite da prikažete
- Za prozor, to je jQuery objekat klase (npr. $("#win2") za prikazivanje prozora sa ovim id). U ovom slučaju, prozor mora prethodno da postoji u DOM-u.
- Zа URL, to je niz (npr. "index2.html"). U ovom slučaju, prikazuje se prvi prozor u fajlu.

options.
transition (opcija tranzicija)

Jedna od vrednosti proklizava, na više, na niže, pojavljuje se, iščezava ili se okreće, zavisno od efekta tranzicije između dva prozora (proklizava podrazumevano). Pogledajte detalje u nastavku.

options.
reverse (opcija preinačenje)

Ako je istinito, određuje se za preinačenje pravca efekta tranzicije. Podrazumevano lažno.

options.
changeHash (opcija izmena heša)

Ukazuje da li se URL adresa u svojoj traci treba izmeniti kako bi se reflektovao URL nove stranice ili prikazanog prozora (ako je changeHash istinito, podrazumevano), ili mora zadržati staru vrednost (ako je changeHash lažno).

options.
pageContainer (opcije kontejner stranice)

jQuery objekat klase ukazuje na element u kojem će se novi prozor prikazati. Podrazumevano $.mobile.pageContainer.

options.
data (opcije podaci)

Opcije podataka su objekat ili niz, zavisno od prenešenih parametara.
- Ako se koristi niz, on mora biti u obliku name1=value1&name2=value2 ..., (ime-vrednost). Svako ime je ime parametra, a vrednost odgovara vrednosti kodiranoj u UTF-8.
- - Ako koristite objekat, sam jQuery Mobile kodira UTF-8 svaku vrednost i šalje serveru niz u obliku name1=value1&name2=value2 itd.

options.
type (opcije tip)

Metod koji opisuje kako preneti parametre ("post" ili "get"). Podrazumevano je "get" (dobiti)

options.
reloadPage (opcije učitaj stranicu)

Ako je istinito, ukazuje na učitavanje prozora u DOM-u, od kojih svaki gleda stranicu. Podrazumevano lažno (prozor se učitava u DOM na prvom ekranu i tako se i koristi). Ova opcija se koristi samo ako se argument toPage odnosi na URL (prozor učitava jQuery Mobile pomoću Ajaxa).

options.
showLoadMsg (opcije prikaži učitane poruke)

Bulova funkcija ukazuje na prikazivanje poruke koja govori da se HTML učitava. Poruka se opisuje u $.mobile.loadingMessage (podrazumevano "učitavanje").

Moguće vrednosti atributa podatak-tranzicija

podatak-tranzicija

Značenje

klizanje

Pomeranje sa jednog prozora na drugi horizontalnim pokretanjem s desna na levo. To je podrazumevana forma.

klizanje na više

Drugi prozor se pojavljuje pri dnu i postepeno prekriva prvi.

klizanje na niže

Drugi prozor se pojavljuje na vrhu i postepeno prekriva prvi.

pojavljivanje

Drugi prozor je centar prvog i širi se da ga prekrije.

iščezavanje

Prvi prozor nestaje postaje prozirniji (od 1 do 0), dok se drugi pojavljuje tako što postaje sve jasniji i jači (od 0 ka 1).

okretanje

Drugi prozor se pojavljuje sa efektom rotacije na vertikalnoj osi i pomera prvi prozor.

Jedno od pitanja koja se mogu pojaviti je: ako koristite $.mobile.changePage () u kliku na link, da li postoji problem u upravljanju href atributom od strane jQuery Mobile-a? Šta ima prioritet pri obradi klika?

Da bi se izbegla konfuzija, jQuery Mobile nam traži da dodelimo "#" vrednost href atributu od <a> linka kada se procedura radi u JavaScript kodu. href="#" u linku govori jQuery Mobile da spreči normalnu obradu (i tako dopusti našu sopstvenu obradu u JavaScriptu).

Pogledajte primere u nastavku o korišćenju $.mobile.changePage (toPage, options) metoda.

Prikazivanje prozora na istoj HTML stranici

Pretpostavlja se da su dva prozora uključena u istu HTML stranicu. Želimo da se prebacimo iz prvog u drugi prozor preko linka kojim upravljamo pomoću $.mobile.changePage () metoda (umesto da koristimo href atribut linka).

Upotrebite $. Mobile.changePage () metod za prikazivanje prozora na istoj HTML stranici

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>


<script>


$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ($("#win2"));

});


</script>

Window 2 ima označivač win2, i odgovara jQuery objektu klase $("#win2"). Zapazite upotrebu href="#" u atributima linka i click događaj (umesto vclick) jer je ovaj događaj pozicioniran na linku (vidi prethodni odeljak).







Prikazivanje prozora na drugoj HTML stranici

Pretpostavimo sada da je naš drugi prozor lociran na drugoj HTML stranici. Upotrebite $.mobile.changePage () metod da biste ga videli. On određuje URL HTML stranice u prvom parametru metoda.

Upotrebite $.mobile.changePage () metod za prikazivanje prozora na novoj HTML stranici

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>


<script>


$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ("index2.html");

});


</script>

Index2.html fajl

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>


</body>

</html>

Rezultat je sličan prethodnom, osim tokom prvog klika na link. Zapravo, prozor još uvek nije učitan u HTML stranicu, pojavljuje se kratka poruka (Loading) učitavanje), tj. vreme za koje se taj prozor ubacuje u tok prozora.

Obratite pažnju na to da, ako je nekoliko prozora u index2.html fajlu, samo će se prvi prozor ubaciti u DOM pomoću jQuery Mobile. Drugi prozori neće biti pristupačni.

Prenošenje podataka za vreme prikazivanja prozora

Pretpostavimo da prvi prozor treba da prenese informacije drugom prozoru, koji ih mora prikazati. To se radi pomoću data opcije u $.mobile.changePage () pozivu, kako bi se preneli parametri na prozor koji će se prikazati.

Upotrebite $.mobile.changePage () metod za prenos informacija

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>


</body>

</html>


<script>


$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ("action.php", 

  {

    data : { fname : "Eric", lname : "Sarrion" }

  });

});


</script>

Prikazivanje novog prozora (action.php fajl)

<?
  $fname = $_REQUEST["fname"];
  $lname = $_REQUEST["lname"];
  $fname= utf8_decode ($fname);
  $lname= utf8_decode ($lname);
  
  $html = "";
  $html .= "<div data-role=page data-add-back-btn=true>";
  $html .=   "<div data-role=header>";
  $html .=     "<h1>Window 2</h1>";
  $html .=   "</div>";
  $html .=   "<div data-role=content>";
  $html .=   "<p>Window content 2</p>";
  $html .=   "<p>First name : $fname</p>";
  $html .=   "<p>Last name : $lname</p>";
  $html .=   "</div>";
  $html .= "</div>";
  echo utf8_encode ($html);
?>

U nastavku možemo videti prikaz nakon klika u prvom prozoru, uključujući prenete informacije (puno ime):




Izmena tranzicije za prikazivanje prozora

Za sada koristimo podrazumevanu tranziciju između svakog prozora, tj. slide tranziciju (klizeću). jQuery Mobile vam omogućava da odredite posebnu tranziciju u $.mobile.changePage () pozivu preko transition opcije.

Let Hajde da uzmemo prethodni primer i dodamo opciju transition na listu opcija:

Upotrebite klizanje na više za tranziciju između dva prozora

$.mobile.changePage ("action.php", 

{

  data : { fname : "Eric", lname : "Sarrion" },

  transition : "slideup"

});

Pojaviće se drugi prozor, ali efekat tranzicije je drugačiji od prethodnih.

Kreiranje prozora i dinamički prikaz kada se desi klik

Umesto da prikažemo prozor koji je već opisan u HTML-u, želimo da ga dinamički kreiramo i prikažemo pomoću $.mobile.changePage () metoda, posle klika na taster u prvom prozoru.

Dinamičko kreiranje prozora

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div data-role=page id=win2 data-add-back-btn=true>";

html +=   "<div data-role=header>";

html +=     "<h1>Window 2</h1>";

html +=   "</div>"

html +=   "<div data-role=content>";

html +=     "<p> Window content 2 </p>";

html +=   "</div>";

html += "</div>";


$(html).insertAfter ("#home");


$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ($("#win2"));

});


</script>

Mi koristimo insertAfter (selector) jQuery metod za ubacivanje elemenata koji čine prozor nakon prvog u DOM-u. Tada se prikazuje novi prozor klikom na link.

$.mobile.loadPage (url, options) metod

$.mobile.loadPage (url, options) metod se koristi interno od strane $.mobile.changePage (toPage, options). On povlači HTML stranicu određenu u URL-u i učitava odgovarajući prozor u memoriju. Aktivni prozor se u prikazu ne menja.

jQuery Mobile nam stavlja ovaj metod na raspolaganje kako bi nam omogućio da razdvojimo učitavanje i prikazivanje HTML stranice. Korišćenje ovog metoda omogućava da primer pred-učita prozor, tako da se on prikaže bez čekanja na zahtev korisnika. To je princip koji jQuery Mobile koristi kroz data-prefetch atribut.

$.mobile.loadPage (url, opcije) parametri metoda

Parametar

Značenje

url

Određuje URL stranice koju želite da učitate u memoriju.

options.
pageContainer (opcije kontejner stranice)

jQuery objekat klase ukazuje na element u okviru kojeg će se novi pozor pokazati. Podrazumevano $.mobile.pageContainer.

options.
data (opcije podaci)

Opcije “podaci” jeste objekat ili niz koji odgovara prenetim parametrima. - Ako se koristi niz, on mora biti oblika name1=value1&name2=value2 itd., svako ime je ime parametra, a vrednost - odgovarajuća vrednost kodirana u UTF-8. - Ako koristite objekat, jQuery Mobile sam kodira UTF-8 svaku vrednosti i šalje serveru niz oblika name1=value1&name2=value2 itd.

options.
type (opcije tip)

Metod koji opisuje kako preneti parametre ("post" ili "get"). Podrazumevano je "get" (dobiit).

options.
reloadPage (opcije učitavanje stranice)

Ako je istinito, određuje učitavanje prozora u DOM-u, od kojih svaki gleda stranicu. Podrazumevano je lažno (prozor se učitava u DOM na prvom prikazu i tako se i koristi).

Simuliranje atributa podatak-prethodno preuzimanje, pomoću $.mobile.loadPage ()

Kada se određuje u linku, atribut data-prefetch (podatak-prethodno preuzimanje) omogućava da jQuery Mobile učita u pozadini HTML stranicu koja odgovara href atributu linka. Da bi to uradio, jQuery Mobile koristi $.mobile.loadPage () metod kako bi sačuvao odgovarajući prozor u memoriji.

Možemo simulirati to ponašanje i pred-učitati prozor opisan u drugoj HTML stranici. Za to koristimo $.mobile.loadPage () metod.

Pred-učitavanje prozora pomoću $.mobile.loadPage () metoda

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>


</body>

</html>


<script>


$("#home").bind ("pagecreate", function ()

{

  $.mobile.loadPage ("index2.html");

});


$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ("index2.html");

});


</script>

index2.html fajl koji sadrži drugi prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win2 data-add-back-btn=true data-dom-cache=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2</p>

  </div>

</div>


</body>

</html>

Drugi prozor je uključen u index2.html fajl. Moramo sačekati dok se ne kreira prvi prozor (pagecreate događaj), tako da se drugi prozor može uključiti kasnije u DOM stablo. Ako se ovaj događaj ne prihvati za učitavanje drugog prozora, ništa neće raditi …

Kada se učita drugi prozor, klik na link u prvom prozoru omogućava vam da ga prikažete pomoću $.mobile.changePage () metoda. Zapazite da se tradicionalna poruka o čekanju (Loading) više ne prikazuje, što ukazuje na to da je prozor već prisutan u DOM-u. I zadržan u DOM-u pomoću data-dom-cache=true atributa podešenog u drugom prozoru.

Proces kreiranja prozora

Važno je razumeti princip kreiranja prozora u jQuery Mobile. Prozor se kreira pri pozivu $.mobile.changePage () or $.mobile.loadPage () metoda. Oba metoda pozivaju enhancePage () interni metod koji kreira prozor ako već nije kreiran.

Оbrada događaja pagecreate (kreiranje stranice)

Da bi se kreirao prozor, enhancePage () metod poziva page () metod udružen sa jQuery Mobile komponentom stranice. Ovaj page () metod kreira komponentu page tj. prozor. Kao što smo videli u studiji o jQuery Mobile komponentama (prethodno poglavlje), pozivanje glavnog metoda komponente (ovde page () metod) podiže događaj čije ime je ime komponente ulančano sa nizom "create" (ovde će biti pagecreate događaj). Zapazićete u jQuery Mobile izvornom kodu da se ovaj pagecreate događaj obrađuje drugačije u različitim delovima koda. Na primer, ovaj deo koda (koji su možda malo izmenili dizajneri jQuery Mobile-a):

događaj kreiranja stranice se obrađuje da bi se kreirao novi prozor (u jquery.mobile.js)

$( ":jqmData(role='page'), :jqmData(role='dialog')" )

    .live( "pagecreate", function( e ) {

    var $page = $( this ),
        o = $page.data( "page" ).options,
        pageTheme = o.theme;

    $( ":jqmData(role='header'), 

        :jqmData(role='footer'), 

        :jqmData(role='content')", this ).each(function() {


        /* … */ 
       
        //apply theming and markup modifications to page,header,content,footer
        if ( role === "header" || role === "footer" ) {


            /* … */

 
        } else if ( role === "content" ) {


            /* … */

 
        }
    });

});

Ovaj blok koda može pretvoriti element sa data-role="page" ili data-role="dialog" atributima na jQuery Mobile windows stilizovan način. Možemo uočiti da se HTML elementi koji odgovaraju naslovu (header, zaglavlju), opisu na dnu stranice (footerpodnožje) i sadržaju prozora (content) transformišu između ostalog i dodavanjem CSS klasa.

Ako ponovo pogledamo jQuery Mobile izvorni kod, pronalazimo i druge delove koda u kojima se takođe govori o događaju kreiranja stranice. Na primer:

Kreiranje polja za unos na jQuery Mobile stilizovan način (u jquery.mobile.js)

//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ){

    $( $.mobile.textinput.prototype.options.initSelector, e.target )
        .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
        .textinput();

});

Događaj kreiranja stranice (pagecreate), prethodno aktiviran prilikom kreiranja novog prozora, dobija se i obrađuje po svim HTML elementima koji su osetljivi na ovaj događaj. Ovaj blok koda pokazuje da objekat document sluša događaj. Kada dobije, jQuery Mobiletextinput () metod (iz textinput komponente koja upravlja poljima za unos) primenjuje se na sve HTML elemente koji odgovaraju određenim selektorima (definisano u $.mobile.textinput.prototype.options.initSelector) i lociranim u naslednicima e.target elementa. Pozivanje ovog metoda vrši kreiranje textInput komponente, kao što smo videli u prethodnom poglavlju.

Zapazite upotrebu e.target parametra za potragu jedino HTML elemenata u naslednicima ovog elementa (obično odgovara prozoru), što ubrzava obradu. Na kraju, svi elementi koji odgovaraju poljima za input koje definiše selektor (i koji su locirani u naslednicima e.target) biće transformisani u polja za input koja imaju jQuery Mobile izgled, samo zbog činjenice da je objekat document primio pagecreate događaj.

Ovaj proces kreiranja komponenti u prozorima realizovano je za sve HTML elemente koji odgovaraju jQuery Mobile komponenti. To odgovara sledećoj tabeli:

jQuery Mobile standardne komponente

Ime

Značenje

page(stranica)

Upravljanje prozorima na stranici

checkboxradio (polje za potvrdu)

Upravljanje poljima za potvrdu i radio tasterima

textinput (tekstualni unos)

Upravljanje tekstualnim unosima

selectmenu (izbor menija)

Upravljanje izbornim menijem

button (taster)

pravljanje tasterima

slider (klizač)

Upravljanje klizačima

collapsible (koji se sažima)

Upravljanje padajućim menijem (“harmonikom”)

listview (pregled liste)

Upravljanje listama

dialog (dijalog)

Upravljanje preklapajućim prozorima

Оvaj proces će nam omogućiti da stilizujemo radio tastere, polja za potvrdu, polja za unos itd., vidljivo za korisnika.

Zapazite da se prvi prozor prikazan u aplikaciji jQuery Mobile kreira automatski tokom izvršenja $.mobile.initializePage () metoda, koji zatim poziva $.mobile.changePage () metod koji pristupa transformisanju, kao što je gore opisano. described above.

Kreiranje standardnih komponenata u jQuery Mobile

Gore navedeni blok koda pokazuje kako jQuery Mobile standardna komponenta reaguje na prijem pagecreate događaja koji se šalje u toku kreiranja prozora. Metod udružen sa komponentom (prethodno textinput ()) poziva se na HTML elemente koji odgovaraju selektorima, kreirajući komponente.

Ipak, vidimo da se ovaj proces odigrava kada HTML elementi prime događaj kreiranja, kao što je prikazano u parametrima bind () metoda. To znači da možemo kreirati jQuery Mobile standardne komponente na dva načina:

  • Aktiviranjem događaja kreiranja create na prozoru koji sadrži HTML element, što vodi ka kreaciji komponente preko obrade koja se vrši u dobijenom elementu,

  • Ili direktnim pozivanjem HTML elementa, metoda za kreiranje komponente (npr. metod textinput () za kreiranje polja za unos).

Оva dva načina su ekvivalentna i daju isti rezultat: komponenta se kreira na prozoru koji je sadrži. Koriste se u narednim poglavljima za dinamičko kreiranje standardnih komponenata koje nam jQuery Mobile pruža.

Sinhronizacija kreiranja komponenata u prozoru

Događaj kreiranja stranice se šalje tokom kreiranja prozora, a prima ga objekat dokument. jQuery Mobile obrada jeste kreiranje svake od komponenata pronađenih u prozoru, kao što smo opisali u prethodnoj sekciji. Kreiranje ovih komponenata generiše nove događaje tipa kreiranja, udružene sa tim komponentama. Na primer:

  • checkboxradiocreate za checkboxradio komponentu odgovara polju za potvrdu ili radio tasteru,

  • textinputcreate za textinput komponentu odgovara polju za unos,

  • slidercreate zaslider komponentu odgovara klizaču,

  • itd..

Na taj način kreira se prozor koji generiše višestruke događaje udružene sa samim prozorom (pagecreate), ali i sa komponentama koje su u njemu uključene(checkboxradiocreate, textinputcreate, itd.).. Interesantno je zapaziti da su ovi događaji nezavisni jedni od drugih. Tako, prijem pagecreate događaja ne znači da je kreiran sadržaj prozora, kao što se dešava u obradi događaja od strane jQuery Mobile-a da se kreiraju komponente prozora, što generiše druge događaje tipa kreiranja.

Prozori za dijalog

Prikazivanje prozora za dijalog

$.mobile.changePage () metod se može upotrebiti i da se prikažu preklapajući prozori. Preklapajući prozor treba da ima data-role="dialog" atribut da bi to funkcionisalo.

Upotrebite $.mobile.changePage () za prikazivanje preklapajućeg prozora

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>


<div data-role=dialog id=win2>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>  

  </div>

</div>

</body>

</html>


<script>


$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ($("#win2"), { transition : "pop" });

});


</script>




Zatvaranje prozora za dijalog

Zatvaranje prozora za dijalog obično će se vršiti klikom na taster close (zatvori) koji jQuery Mobile automatski dodaje. Ipak, takođe može biti korisno da imate sopstveni zatvarajući mehanizam, kao što je taster ubačen u sadržaj prozora. Onda je neophodno, u obradi tastera, pozvati dialog ("close") metod na <div> što odgovara prozoru.

Upotrebite taster za zatvaranje u prozoru za dijalog

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=# id=link1> Goto window 2 </a>

  </div>

</div>


<div data-role=dialog id=win2>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>  

    <a id=close data-role=button> Close window </a>

  </div>

</div>

</body>

</html>


<script>


$("#link1").bind ("click", function (event)

{

  $.mobile.changePage ($("#win2"), { transition : "pop" });

});


$("#close").bind ("click", function (event)

{

  $("#win2").dialog ("close");

});


</script>




Uklonite taster za zatvaranje iz prozora za dijalog

Na kraju pogledajte kako da uklonite taster za zatvaranje koje dodaje jQuery Mobile u naslovu preklapajućeg prozora. To odgovara <a> elementu lociranom u naslovnoj traci, i pristupačno je preko selektora $(this).find ("div: jqmData (role=header) a"), ako this je preklapajući prozor.

Ipak, možemo pristupiti ovom elementu samo posle HTML koda, jer jQuery Mobile transformiše preklapajući prozor. Ovo vreme odgovara događaju kreiranja dijaloga dialogcreate jer preklapajućim prozorom upravlja jQuery Mobile standardna komponenta dijaloga dialog.

So Pa pišemo:

Ukloni taster za zatvaranje iz prozora za dijalog

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=#win2 id=link1> Goto window 2 </a>

  </div>

</div>


<div data-role=dialog id=win2>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>  

  </div>

</div>

</body>

</html>


<script>


$("#win2").bind ("dialogcreate", function ()

{

  $(this).find ("div:jqmData(role=header) a").hide ();

});


</script>

Zapazite da prozor za dijalog takođe prima događaj kreiranja stranice pagecreate ali s obzirom da se taj događaj prima pre događaja kreiranja dijaloga dialogcreate i ne informiše da je jQuery Mobile transformisao HTML. Stoga smo obavezni da ovde koristimo događaj kreiranja dijaloga.




Prozor za dijalog više nema taster za zatvaranje.

Оstale metode i osobine

Pored $.mobile.changePage (), jQuery Mobile pruža dodatne metode i osobine koje su takođe podešene u $.mobile objektu.

Metode definisane na $.mobile objektu

Metod / Osobina

Značenje

showPageLoadingMsg ()(prikaži poruku o učitavanju stranice)

Metod za prikazivanje poruke o čekanju koja govori da se stranica učitava. Poruka se definiše u $.mobile.loadingMessage nizu ("učitavanje" podrazumevano).

hidePageLoadingMsg ()(sakrij poruku o učitavanju stranice)

Metod za sakrivanje poruke o čekanju koju je prethodno prikazivala opcija showPageLoadingMsg ().

activePage (aktivna stranica)

Osobina koja predstavlja jQuery objekat klase za trenutno prikazan prozor na ekranu.

firstPage (prva stranica)

Osobina koja predstavlja jQuery objekat klase koji odgovara prvom prozoru opisanom na HTML stranici (što će se normalno prvo prikazati).

pageContainer (kontejner stranice)

Osobina koja predstavlja jQuery objekat klase koji odgovara elementu u koji je prozor ubačen. Podrazumevano, element roditelj prvog prozora u principu odgovara elementu. Zapazite da jQuery Mobile dodeljuje ui-mobile-viewport CSS klasu ovom elementu.
Vrednost ove osobine se može izmeniti samo tokom obrade $ (document).ready () događaja ili posle toga. Novi prikazani prozori će zatim biti ubačeni u taj element.

Upotrebite takvu $.mobile.activePage osobinu da biste saznali HTML sadržaj aktivnog prozora. Mi ubacujemo link u prozor koji prikazuje ovaj sadržaj u upozorenju.

Pogledajte HTML sadržaj aktivnog prozora

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>  

    <a href=# id=link1> View the contents of the active window </a>

  </div>

</div>


</body>

</html>


<script>


$("#link1").bind ("click", function (event)

{

  alert ($.mobile.activePage.html ());

});


</script>




Upravljanje događajima u prozorima

jQuery Mobile je uspostavio sistem događaja udruženog sa prozorima. Na primer, moguće je rukovati događajem uz kreiranje prozora (pagecreate), ali i odgovarajućim događajima u prikazu ili nestajanju prozora(pageshow i pagehide).

Kreiranje prozora

jQuery Mobile kreira prozor onda kada treba da se prikaže. Kreiranje prozora zahteva transformisanje početnog HTML koda u drugi HTML kod koji će se prikazati kao prozor na ekranu (naročito dodavanjem CSS klase koja će stilizovati različite komponente prozora). Ovaj proces kreiranja se vrši samo jednom, kod prvog prikazanog prozora (osim ako se prozor u međuvremenu ne ukloni iz memorije).

Događaji udruženi sa kreiranjem prozora

Ime

Značenje

pagebeforecreate (stranica pre kreiranja)

Aktivirano u prvom prikazu prozora, pre procesa kreiranja prozora.

pagecreate (kreiranje stranice)

Aktivirano na kraju procesa kreiranja prozora. Interne komponente prozora (radio tasteri, polja za potvrdu, liste itd.) obrađuju se nezavisno od prijema događaja kreiranja stranice na prozoru, i stoga se mogu kreirati ili ne (u tom trenutku).

pageinit (početak stranice)

Aktivirano posle događaja kreiranja stranice, i onda kada su kreirane sve komponente prozora.

Da biste razumeli sekvence ovih događaja, uradite sledeći mali program:

Događaji udruženi sa kreiranjem prozora

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <input type=range id=slider1 min=1 max=100 />

    

    <label for=check1>checkbox</label>

    <input type=checkbox id=check1 />    

    

    <a href=#win2 id=link1> Goto window 2 </a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>  

  </div>

</div>


</body>

</html>


<script>


$("#check1").live ("checkboxradiocreate", function (event)

{

  alert ("checkbox created");

});


$("#slider1").live ("slidercreate", function (event)

{

  alert ("slider created");

});


$("div:jqmData(role=page)").bind ("pagebeforecreate", function (event)

{

  alert ("pagebeforecreate id=" + this.id);

});


$("div:jqmData(role=page)").bind ("pagecreate", function (event)

{

  alert ("pagecreate id=" + this.id);

});


$("div:jqmData(role=page)").bind ("pageinit", function (event)

{

  alert ("pageinit id=" + this.id);

});


</script>

Definisali smo dva prozora, drugi prikazan posle klika na link u prvom. Prekinuli smo događaje kreiranja svakog prozora. Svaki događaj će prikazati svoje ime praćeno sa id prozora koji ga je generisao.

Zapazite da, ako je drugi prozor lociran u eksternom fajlu, pagebeforecreate, pagecreate i pageinit (stranica pre kreiranja), pagecreate (kreiranje stranice) i pageinit (otpočinjanje stranice) događaji udruženi s njima se aktiviraju svaki put kada se prozor prikaže (a ne samo prvi), osim ukoliko prozor nije smešten u keš memoriju pomoćudata-dom-cache="true" atributa.

Takođe slidercreate(kreiranje klizača) i checkboxradiocreate (kreiranje polja za potvrdu) događaji aktiviraju se upravo pre pageinit događaja, koji znači da su sve komponente prozora kreirane.

Učitavanje prozora preko Ajaxa

Dok prozor još nije prisutan u DOM-u, jQuery Mobile ga učitava pomoću Ajaxa u HTML-u. On generiše (na objektu dokument) pagebeforeload (stranica pre učitavanja) događaj pre učitavanja prozora, zatim pageload (učitavanje stranice) događaj ako je učitavanje bilo uspešno ili pageloadfailed (neuspešno učitavanje stranice) događaj ako je bilo neuspešno.

Svaki od navedenih događaja dobija event i data parametre (tim redom). data parametar ima url osobinu koja sadrži puni URL fajla koji učitava Ajax.

Događaji udruženi sa učitavanjem prozora preko Ajaxa

Ime

Značenje

pagebeforeload

Aktivira se pre učitavanja prozora preko Ajaxa. Prozor je lociran u eksternom fajlu što može i ne mora biti uspešno učitano.

pageload

Aktivira se pri učitavanju fajla koji sadrži prozor koji je uspešno dovršen. Prozor je kreiran u DOM stablu (događaj kreiranja stranice se pušta pre učitavanja stranice).

pageloadfailed

Aktivira se pri učitavanju fajla koji sadrži neuspešan prozor. Prozor nije ubačen u DOM stablo.

Da biste razumeli sekvence ovih događaja, kreiramo prozore u različitim HTML fajlovima:

  • Prozor 1 je prvi prikazani prozor, lociran u index.html fajlu.

  • Prozor 2 je lociran na originalnoj HTML stranici (index.html) koja sledi za Prozorom 1.font>

  • Prozor 3 je lociran u postojećem fajlu index3.html.

  • Prozor 4 je lociran u postojećem fajlu index4.html. Ima data-dom-cache="true" atribut koji ukazuje na njegovo zadržavanje u DOM-u (umesto u Prozoru 3).

  • Prozor 5 je lociran u nepostojećem fajlu index5.html Dolazi do greške u učitavanju kada se prikaže.

Prozor 1 sadrži link za pristup svakom od ostala četiri prozora. Mi prikazujemo poruku kada se desi neki od prethodnih dogaaja, ali i kada se aktiviraju pagebeforecreate, pagecreate i pageinit događaji

Događaji za kreiranje prozora preko Ajaxa (index.html fajl)

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=#win2> Goto Window 2 (into the DOM) </a>

    <br /><br />


    <a href=index3.html> 

         Goto Window 3 in index3.html (data-dom-cache=false) </a>

    <br /><br />


    <a href=index4.html> 

         Goto Window 4 in index4.html (data-dom-cache=true) </a>

    <br /><br />


    <a href=index5.html> Goto Window 5 (index5.html nonexistent) </a>

    <br /><br />

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>


<script>


$(document).bind ("pagebeforeload", function (event, data)

{

  alert ("pagebeforeload data.url = " + data.url);

});


$(document).bind ("pageload", function (event, data)

{

  alert ("pageload data.url = " + data.url);

});


$(document).bind ("pageloadfailed", function (event, data)

{

  alert ("pageloadfailed data.url = " + data.url);

});


$("div:jqmData(role=page)").live ("pagebeforecreate", function (event)

{

  alert ("pagebeforecreate id=" + this.id);

});


$("div:jqmData(role=page)").live ("pagecreate", function (event)

{

  alert ("pagecreate id=" + this.id);

});


$("div:jqmData(role=page)").live ("pageinit", function (event)

{

  alert ("pageinit id=" + this.id);

});


</script>

Index3.html fajl koji sadrži prozor 3

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win3 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 3</h1>

  </div>


  <div data-role=content>

    <p> Window content 3 </p>

  </div>

</div>


</body>

</html>

Index4.html fajl koji sadrži prozor 4

<!DOCTYPE html> 

<html> 

<head> 

  <meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=win4 data-add-back-btn=true data-dom-cache=true>

  <div data-role=header>

    <h1>Window 4</h1>

  </div>


  <div data-role=content>

    <p> Window content 4 </p>

  </div>

</div>


</body>

</html>

Index5.html fajl ne postoji, kako bi se namerno izazvala Ajax greška pri učitavanju kada se klikne na link.

BNavigacijom između matičnog i drugih prozora, pušta se događaj. Može se primetiti da, kada je prozor već učitan u memoriju (u DOM), događaji povezani sa Ajaxom (pagebeforeload, pageload i pageloadfailed) se više ne aktiviraju.

Uklonite prozor u DOM-u

Da biste umanjili prostor koji prozor zauzima u memoriji, jQuery Mobile automatski uklanja one koje učita Ajax kada više nisu vidljivi (osim ako nemaju podatak attribute-dom-cache=istinito značenje njihovog zadržavanja).

Pre uklanjanja prozora iz memorije, pageremove događaj se aktivira na prozoru koji će se ukloniti iz DOM-a. Tada je moguće zabraniti uklanjanje prozora iz memorije, pozivanjem event.preventDefault () pri obradi pageremove događaja. U slučaju kada se ovaj iskaz ne poziva, prozor se uklanja iz DOM stabla. Ako se prozor kasnije treba ponovo prikazati, jQuery Mobile će uputiti drugi Ajax poziv.

Zabraniti uklanjanje prozora u memoriji koje učita Ajax

$("div:jqmData(role=page)").live ("pageremove", function (event)

{

  alert ("pageremove id=" + this.id);

  event.preventDefault ();

});

Window display

Kada je prozor kreiran (ispravno ili ne), spreman je za prikaz. Može se prikazati i sakriti više puta, a kreira se samo jednom (osim ako nije eksterni fajl, a data-dom-cache atribut je "false")

Događaji udruženi sa prikazivanjem prozora

Ime

Značenje

pagebeforeshow (stranica pre pokazivanja)

Aktivira se pre nego što se prozor prikaže (nije još vidljivo).

pageshow (pokazivanje stranice)

Aktivira se kada se prozor prikaže (vidljivo).

pagebeforehide (stranice pre sakrivanja)

Aktivira se pre nego što se prozor sakrije (još uvek je vidljivo).

pagehide (sakrivanje stranice)

Aktivira se pošto se prozor sakrije (nije više vidljivo).

Svaki od ovih događaja aktivira se posle događaja kreiranja stranice udruženog sa prozorom. Njima upravlja bind () metod na jQuery objektu klase koji odgovara prozoru. Funkcija povratnog prozora se poziva za vreme obrađivanja događaja i ona je u obliku callback (event, ui) gde je ui parametar objekta sa prevPage ili nextPage osobinom.

  • Ako je događaj tipa “pokaži” (pageshow ili pagebeforeshow) ui.prevPage odgovara jQuery objektu klase koji definiše prozor koji je neko napustio ili napušta, da bi se prikazao ovaj. Osobina ui.nextPage nije definisana u ovom slučaju.

  • Ako je događaj tipa “sakri” (pagehide ili pagebeforehide) ui.nextPage odgovara jQuery objektu klase sa prozorom koji ćemo pokazati ili koje je prikazan kada smo napustili ovaj. ui.prevPage osobina nije definisana u ovom slučaju.

Hajde da se vratimo na prethodni program u kojem smo prekinuli događaje tipa “pokaži” i “sakri” na dva prozora:

Prikaži tip događaja u prozoru

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=#win2 id=link1> Goto window 2 </a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>  

  </div>

</div>


</body>

</html>


<script>


$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)

{

  var txt = "pagebeforeshow id=" + this.id + "\n";

  if (ui.prevPage && ui.prevPage[0])

    txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";

  if (ui.nextPage && ui.nextPage[0]) 

    txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";

  alert (txt);

  

});


$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)

{

  var txt = "pageshow id=" + this.id + "\n";

  if (ui.prevPage && ui.prevPage[0])

    txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";

  if (ui.nextPage && ui.nextPage[0]) 

    txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";

  alert (txt);

});


$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)

{

  var txt = "pagebeforehide id=" + this.id + "\n";

  if (ui.prevPage && ui.prevPage[0])

    txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";

  if (ui.nextPage && ui.nextPage[0]) 

    txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";

  alert (txt);

});


$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)

{

  var txt = "pagehide id=" + this.id + "\n";

  if (ui.prevPage && ui.prevPage[0])

    txt += "ui.prevPage=" + ui.prevPage[0].id + "\n";

  if (ui.nextPage && ui.nextPage[0]) 

    txt += "ui.nextPage=" + ui.nextPage[0].id + "\n";

  alert (txt);

});


</script>

Događaji povezani sa $.mobile.changePage () metodom

Kada se koristi $.mobile.changePage () metod (bilo direktno u našem programu, bilo interno od strane jQuery Mobile-a), jQuery Mobile generiše određene događaje kako bi saznao ili posredovao u obrađivanju promena u prozoru. Ti događaji se aktiviraju u objektu document .

Događaj pagebeforechange je prvi događaj koji se aktivira pre bilo kog drugog (uključujući i one proučavane u prethodnim poglavljima). Metod upravljanja događajem uzima data i event argumente kao parametre. Osobina data.toPage je niz (u ovom slučaju ime fajla koji sadrži prozor za prikaz, kao što je "index2.html") ili jQuery objekat klase (koji simboliše prozor, tako da želite da prikažete, na primer $("#win2")).

Zapazite da se ovaj događaj može uspešno pozvati dva puta, prvi put pre učitavanja fajla koji sadrži prozor, pomoću Ajaxa (data.toPage je niz), drugi put kada se prozor učita u memoriju (data.toPage je jQuery objekat klase). U svakom slučaju, bar se drugi poziv upućuje (jer prozor mora da bude prisutan u memoriji pre prikazivanja).

Takođe, imamo mogućnost da prekinemo proces prikazivanja prozora izvršavanjem event.preventDefault () instrukcija prilikom obrade pagebeforechange event. događaja. Taj iskaz se može izvršiti u jednom od dva poziva koji se upute pagebeforechange događaju. Naknadno, proces prikazivanja se prekida.

Stopiranje prikazivanja prozora

$(document).bind ("pagebeforechange", function (event, data)

{

   event.preventDefault ();

});

U slučajevima u kojima proces prikazivanja nije stopiran (od strane event.preventDefault () instrukcije u pagebeforechange događaju), pagechange ili pagechangefailed događaji se aktiviraju na objektu document .

  • Događaj pagechangeukazuje na to da se prozor može prikazati. To je poslednji događaj koji emituje jQuery Mobile, pokazujući da je prozor kreiran i prikazan. Funkcija obrade događaja koristi event i data parametre, od kojih poslednji imadata.toPage svojstvo koje predstavlja jQuery objekat klase udružen sa aktivnim prozorom (koji je prikazan).

  • Događaj pagechangefailed ukazuje na to da se prozor ne može prikazati. To je rezultat neupešnog učitavanja prozora Ajax pozivom (pageloadfailed događaj je prethodno aktiviran).

Kretanje u prozoru

Pored tradicionalnih događaja kao što su vclick(klik),vmouseover(prevlačenje miša), vmousedown, vmousemove, vmouseup, vmouseout i vmousecancel, jQuery Mobile je kreirao nove događaje koji su korisni u mobilnom kontekstu.

Događaji udruženi sa kretanjem u prozorima

Ime

Značenje

tap (lak dodir)

Aktivira se kada se mišem (levim tasterom) ili prstom klikne na ekran. Slično tradicionalnom jednom kliku.

taphold (dodir i držanje)

Aktivira se kada se mišem (levim tasterom) ili prstom drži pritisnuto najmanje jednu sekundu.

swipe (pritisak)

Aktivira se kada se mišem (levim tasterom) ili prstom kreće horizontalno preko ekrana.

swipeleft (pritisak i vučenje na levo)

Aktivira se kada se mišem (levim tasterom) ili prstom kreće horizontalno preko ekrana sa desna na levo.

swiperight (pritisak i vučenje na desno)

Aktivira se kada se mišem (levim tasterom) ili prstom kreće horizontalno preko ekrana sa leva na desno.

Događaji tipa swipe (pritisak) omogućavaju, na primer, skrolovanje kroz slike na ekranu prevlačeći ih prstom na desno ili na levo. Zapazite da je jQuery Mobile fokusiran na osiguravanje kompatibilnosti između ekrana osetljivih na dodir i konvencionalnih ekrana koji koriste miša.

Sledeći program prikazuje događaje tipa swipe i taphold) u prozoru, koji se na njemu dešavaju.

Prikaži događaje tipa swipe (pritisak) i taphold (dodirni i drži) u prozoru

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Events : </p>  

    <div id=evt></div>

  </div>

</div>


</body>

</html>


<script>


$("#home").bind ("taphold", function (event)

{

  var txt= "taphold, ";

  $("#evt").append (txt);

});


$("#home").bind ("swipe", function (event)

{

  var txt= "swipe, ";

  $("#evt").append (txt);

});


$("#home").bind ("swipeleft", function (event)

{

  var txt= "swipeleft, ";

  $("#evt").append (txt);

});


$("#home").bind ("swiperight", function (event)

{

  var txt= "swiperight, ";

  $("#evt").append (txt);

});


</script>

Nakon nekoliko pokreta u prozoru, prikazuje se sledeće:




Događaji tipaSwipe (pritisak) detektuju pokrete u horizontal pravcu. jQuery Mobile takođe kreira događaje tipa scroll (skrolovanje) koji detektuju pokrete u vertical smeru.

Događaji udruženi sa vertikalnim pokretima u prozoru

Ime

Značenje

scrollstart (početak skrolovanja)

Aktivira se kada se mišem (levim tasterom) ili prstom kreće vertikalno na ekranu na gore ili na dole.

scrollstop (kraj skrolovanja)

Aktivira se kada se miš (levi taster) ili prst ukloni sa ekrana (kraj vertikalnog istiskivanja).

Vidi događaje tipa skrolovanja u prozoru

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Events : </p>  

    <div id=evt></div>

  </div>

</div>


</body>

</html>


<script>


$("#home").bind ("scrollstart", function (event)

{

  var txt= "scrollstart, ";

  $("#evt").append (txt);

});


$("#home").bind ("scrollstop", function (event)

{

  var txt= "scrollstop, ";

  $("#evt").append (txt);

});


</script>




Izmena orijentacije ekrana

jQuery Mobile nudi događaj orientationchange (izmena orijentacije), kako bi se detektovala izmena u orijentaciji ekrana. Parametar event koji je dat u funkciji povratnog poziva obezbeđujeorientation svojstvo "portrait" ili "landscape" u skladu sa orijentacijom ekrana.

Događaji udruženi sa izmenom u orijentaciji ekrana

Ime

Značenje

orientationchange (izmena orijentacije)

Aktivira se nakon izmene u orijentaciji ekrana. Svojstvo event.orientation ukazuje na "portrait" ili "landscape" u skladu sa orijentacijom.

Sledeći program pokazuje, u upozorenju, sve izmene u orijentaciji koje su napravljene u prozoru.

Prikaži izmene u orijentaciji u prozoru

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>  

  </div>

</div>


</body>

</html>


<script>


$("#home").bind ("orientationchange", function (event)

{

  alert (event.orientation);

});


</script>




Takođe je moguće ispraviti trenutnu orijentaciju ekrana a da se ne izazove izmena u orijentaciji. Ova vrednost ("portrait" ili "landscape") je dostupna preko $.event.special.orientationchange.orientation () metoda.

Ispravi trenutnu orijentaciju

alert ($.event.special.orientationchange.orientation ()); 

                                      // "portrait" or "landscape"

Prilagođavanje prozora

Prozor sadrži uglavnom tri zone:zaglavlje (header), sadržaj (content) i podnožje (footer). Mi sada proučavamo kako da prilagodimo content prozora, znajući da će prilagođavanje drugih zona biti obrađeno u poglavlju o paletama alatki.

Da biste videli kako da prilagodite prikaz sadržaja prozora, upotrebite sledeći HTML kod koji prikazuje jednostavan prozor.

Najmanji prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Paragraph 1 </p>  

    <p> Paragraph 2 </p>  

    <p> Paragraph 3 </p>  

    <p> Paragraph 4 </p>  

    <p> Paragraph 5 </p>  

    <p> Paragraph 6 </p>  

    <p> Paragraph 7 </p>  

    <p> Paragraph 8 </p>  

    <p> Paragraph 9 </p>  

  </div>

</div>


</body>

</html>

Upravo smo dodali paletu alatki za header i sadržaj od devet paragrafa. Ovaj prozor se prikazuje na tradicionalan način:




Da biste razumeli kako da prilagodite sadržaj prozora, samo pogledajte u HTML koje je generisao jQuery Mobile iz jednog koji smo mi napisali. Za to mi koristimo, na primer, Firefox kombinovan sa Firebugom.




<div> element, koji odgovara sadržaju prozora, sada ima ui-content CSS klasu. Ako definišemo ovaj stil u našoj HTML stranici, sadržaj prozora će izmeniti svoj izgled.

Izmena stila udružena sa sadržajem prozora

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  

  <style type=text/css>

    .ui-content {

      font-style : italic;

      font-size : 20px;

      background-color : grey;

      color : red;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Paragraph 1 </p>  

    <p> Paragraph 2 </p>  

    <p> Paragraph 3 </p>  

    <p> Paragraph 4 </p>  

    <p> Paragraph 5 </p>  

    <p> Paragraph 6 </p>  

    <p> Paragraph 7 </p>  

    <p> Paragraph 8 </p>  

    <p> Paragraph 9 </p>  

  </div>

</div>


</body>

</html>




Primeri manipulacije prozorima

Prebacivanje između višestrukih prozora zahvaljujući događajima pritiska

Mi želimo da koristimo događaje tipa “pritisak” swipe da bismo se prebacivali između tri prozora. Pritisak i vučenje na levo Swipeleft omogućava vam da pređete na sledeći prozor (ako postoji), dok nas događaj pritiska i vučenja na desno swiperight vraća na prethodni prozor (jednako tasteru “nazad”,Back ).

Koristite događaje pritiska za prebacivanje između tri prozora

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

  </div>

</div>


<div data-role=page id=win2>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>  

  </div>

</div>


<div data-role=page id=win3>

  <div data-role=header>

    <h1>Window 3</h1>

  </div>


  <div data-role=content>

    <p> Window content 3 </p>  

  </div>

</div>


</body>

</html>


<script>


$("div:jqmData(role=page)").bind ("swipeleft", function (event)

{

  var id = this.id;

  var next;   // id of the next visible window

  if (id == "home") next = "win2";

  else if (id == "win2") next = "win3";

  if (next) $.mobile.changePage ($("#" + next), 

  

    transition : "slide" 

  });

});


$("div:jqmData(role=page)").bind ("swiperight", function (event)

{

  var id = this.id;

  var next;   // id of the next visible window

  if (id == "win2") next = "home";

  else if (id == "win3") next = "win2";

  if (next) $.mobile.changePage ($("#" + next), 

  

    transition : "slide",

    reverse : true

  });

});


</script>

Zapazite da koristimoreverse opciju podešenu na true in the $.mobile.changePage () za vreme obrade događaja pritiska i vučenja na desno swiperight. Zapravo, u događaju želimo da se vratimo na prethodni prozor. Ako koristimo samo kliznu tranziciju slide vratićemo se na prethodni prozor, ali sa efektom skrolovanja kao da idemo na sledeći prozor. Opcija reverse podešena na true služi za vraćanje pravca tog efekta.

Kreirajte prozor i prikažite ga dinamički

Ovde unapređujemo prethodno proučen primer u ovom poglavlju, a to je dinamičko kreiranje prozora i njegovo prikazivanje kada se klikne na prethodni prozor. Sada želimo da direktno prikažemo dinamički kreiran prozor, a da ne pravimo klik u prethodnom prozoru.

Direktno prikaži dinamički kreiran prozor

<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>  

    <a href=#win2 id=link1 data-role=button> Goto Window 2 </a>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<div data-role=page id=win2 data-add-back-btn=true>";

html +=   "<div data-role=header>";

html +=     "<h1>Window 2</h1>";

html +=   "</div>"

html +=   "<div data-role=content>";

html +=     "<p> Window content 2 </p>";

html +=   "</div>";

html += "</div>";


$("body").append (html);


$("#home").bind ("pagecreate", function (event)

{

  $.mobile.changePage ($("#win2"));

});


</script>

HTML kod drugog prozora se ubacuje prilikom lansiranja aplikacije u DOM stablo. Zatim, na kraju procesa kreiranja prvog prozora (događaj kreiranja stranice), prikazuje se drugi prozor. Ako se čeka da se prvi prozor kreira, tranzicija između prozora se ne dešava.




Copyright Eric Sarrion (ericsarrion@gmail.com)