Пређи на садржај

JQuery mobile

С Википедије, слободне енциклопедије

jQuery Mobile je web framework prilagođen za ekrane osetljive na dodir (takođe poznat kao mobilni framework), ili preciznije JavaScript biblioteka, koju trenutno razvija jQuery tim. Razvoj je usmeren na stvaranje framework-a koji je kompatibilan sa širokim spektrom pametnih telefona i tablet računara[1] , što je bilo neophodno zbog pojavljivanja sve većeg broja različitih tablet računara I pametnih telefona na tržištu[2]. jQuery Mobile[3] framework je komaptibilan sa drugim mobilnim framework-ovima i platformama kao što su PhoneGap, Worklight[4] I druge.

Karakteristike

[уреди | уреди извор]
  • Kompatibilan je sa svim poznatijim pregledačima veba I mobilnim platformama uključujući Android, iOS, Windows Phone, Blackberry, WebOS, Symbian.
  • Napravljen je po uzoru na jQuery tako da ljudi koji su upoznati sa jQuery sintaksom mogu lako da ga savladaju.
  • Tematski framework koji dopušta kreiranje proizvoljnih tema.
  • Kod ce se isto prikazivati na bilo kom ekranu.
  • HTML5-kontrolisana konfiguracija za izradu stranica sa minimalno kodiranja.
  • Navigacija zasnovana na AJAX-u sa animiranim prelaskom stranica koja omogućuje sposobnost kreiranja semantičkih URL-ova kroz pushState.
  • UI widget-i koji su optimizovani za ekrane koji su osetljivi na dodir i specifični za platformu.


Primer

[уреди | уреди извор]

Ono što sledi je osnovni jQuery Mobile projekat koji koristi HTML5 semantičke elemente. Važno je povezati ga sa jQuery i jQuery Mobile JavaScript bibliotekama kao i stilskim listovima (datoteke mogu biti preuzete i skladištene lokalno, ali je preporučljivo da budu povezane sa datotekama uskaldištenim na jQuery CDN). Glavni deo projekta je definisan sa section HTML5 elementom I atributom data-role sa vrednošću page. Primetimo da je data-role atribut iz jQuery Mobile, a ne iz HTML5. Stranica može imati header i footer elemente sa atributom data-role koji imaju redom vrednosti header I footer . Izmedju se može nalaziti element article sa atributom data-role postavljenim na vrednost content . Takođe, element nav može imati atribut data-role koji ima vrednost navbar . HTML dokument može sadržati više section elemenata, kao I više stranica. Potrebno je samo učitati datoteku koja sadrži više stranica sadržaja gde jedna stranica može da vodi do druge iz iste datoteke navodjenjem id-ja stranice kao atributa(npr. href="#second" ).


U istom primeru, druga dva data-atributa su korišćena. Atribut data-theme obaveštava pregledače o temi koju renderuje, a atribut data-add-back-btn dodaje back dugme na stranicu ako mu je vrednost postavljena na true . Na kraju, ikonice mogu biti dodate pomoću data-icon atributa. jQuery Mobile ima na raspolaganju pedeset ugradjenih ikonica.

Kratko objašnjenje data-atributa korišćenih u ovom primeru:

data-role – objašnjava ulogu elementa, kao što su header, content, footer, itd.

data-theme – određuje koju će temu koristiti elementi bez omotača. Vrednost mu može biti postavljena na a ili b.

data-position – određuje da li će pozicija elementa biti fiksirana I u kom slučaju će se prikazivati na vrhu (header) ili dnu (footer).

data-transition – bira jednu od deset ugrađenih animacija za učitavanje novih stranica.

data-icon – podržava pedeset ikonica koje se mogu pridružiti elementu. 

<!doctype html>
<html>
    <head>
		<meta charset="utf-8">
		<title>jQuery Mobile Example</title>
		<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
 
    <body>
        <section data-role="page" id="first" data-theme="a">
            <header data-role="header" data-position="fixed">
                <h1>Page 1 Header</h1>
            </header>
 
            <article data-role="content">
                <h2>Hello, world!</h2>
                <a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right">Go to Page 2</a>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 1 Footer</h4>
            </footer>
        </section>
 
        <section data-role="page" id="second" data-theme="b">
            <header data-role="header" data-position="fixed"  data-add-back-btn="true">
                <h1>Page 2 Header</h1>
            </header>
 
            <article data-role="content">
                <h2>Example Page</h2>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 2 Footer</h4>
            </footer>
        </section>
    </body>
</html>

Upotreba tema

[уреди | уреди извор]

jQuery Mobile obezbeđuje moćan tematski framework koji dopušta developerima da prilagode šeme boja I određene CSS aspekte UI. Developeri mogu koristiti jQuery Mobile ThemeRoller[5] aplikaciju da prilagode izgled. Nakon pravljenja teme u ThemeRoller aplikaciji, programeri mogu preuzeti proizvoljan CSS dokument I uključiti u projekat svoju temu.[6] Svaka tema može sadržati do 26 jedinstvenih uzoraka boja, i sastoji se od zaglavlja, sadržaja I dugmića. Kombinovanje različitih uzoraka dozvoljava developeru da napravi širi opseg vizuelnih efekata nego što bi mogao sa jednim uzorkom po temi.Menjanje različitih uzoraka u okviru teme je podjednako jednostavno kao dodavanje atributa “data-theme” u HTML element.

Podrazumevana jQuery Mobile tema dolazi sa dva različita uzorka boja nazvana "a" i "b". Ovo je primer kako napraviti toolbar sa uzorkom "b" : 

<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
</div>


Već postoji mnogo stilskih tema otvorenog koda koje su razvijene I podržane od strane posredničkih organizacija. Jedna takva tema je Metro style koja je razvijena od strane Microsoft Open Technologies, Inc..[7] Metro style tema je napravljena da oponaša UI Metro (design language) koji Microsoft koristi u svojim mobilnim operativnim sistemima.

Podrška mobilnih pregledača

[уреди | уреди извор]
Platform Version Native Phone Gap Opera Mobile Opera Mini Fennec Ozone Net front
0.9 8.5, 8.65 9.5 10 4.0 5.0 1.0 1.1* 0.9 4.0
iOS v2.2.1 A
v3.1.3, v3.2 A A A
v4-7.0 A A A
Symbian S60 v3.1, v3.2 A A A A A C C
v5.0 C C C A C A
Symbian UIQ v3.0, v3.1 C C
v3.2 C C
Symbian Platform v.3.0 A
BlackBerry OS v4.5 C C C
v4.6, v4.7 C C C B
v5.0 B A C A
v6.0 A A A
Android v1.5, v1.6 A A
v2.1 A A
v2.2 A A A C A
Windows Mobile v6.1 C C C C B C B C
v6.5.1 C C C A A C A
v7.0 A A C A
webOS 1.4.1 A A
bada 1.0 A
Maemo 5.0 B B C B
MeeGo 1.1* А А А


Ključ:

  • A - Visokog kvaliteta. Pregledač koji može da koristi medija upite (potrebnih za {jQuery Mobile}). Ovi pregledači će biti aktivno testirani na jQuery mobile,ali možda neće moći da u potpunosti iskoriste njegove mogućnosti.
  • B- Srednjeg kvaliteta Pregledač koji nije dovoljno rasprostranjen na tržištu da bi bio svakodnevno testiran, ali će na njih biti primenjeni alati za ispravljanje bagova.
  • C- Niskog kvaliteta – Niskog kvaliteta. Pregledač koji ne može da koristi medija upite. Oni nisu u mogućnosti da prikažu {jQuery Mobile} ili CSS sadržaj (prikazuju jednostavan HTML I CSS sadržaj).
  • * - Pregledač u pripremi. Ovaj pregledač nije još u upotrebi, već je u fazi testiranja.



Reference

[уреди | уреди извор]
  1. ^ „Mobile Graded Browser Support”. 
  2. ^ „The Global Rise of the Smartphone”. Архивирано из оригинала 17. 06. 2018. г. Приступљено 26. 05. 2015. 
  3. ^ „jQuery Mobile or Sencha Touch: Which One Is Better!”. htmlpanda.com. 
  4. ^ „IBM Worklight - United States”. Worklight.com. Архивирано из оригинала 19. 04. 2012. г. Приступљено 9. 10. 2013. 
  5. ^ „ThemeRoller”. 
  6. ^ „JQuery Mobile Theming Overview”. Архивирано из оригинала 21. 01. 2013. г. Приступљено 26. 05. 2015. 
  7. ^ „More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile”. 


Spoljašnje veze

[уреди | уреди извор]
Преузето из „https://sr.wikipedia.org/w/index.php?title=JQuery_mobile&oldid=27753886”