JQuery mobile

From Wikipedia, the free encyclopedia

Remove ads

jQuery Mobile je prilagođen za ekrane osetljive na dodir (takođe poznat kao mobilni ), ili preciznije JavaScript biblioteka, koju trenutno razvija jQuery tim. Razvoj je usmeren na stvaranje -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] je komaptibilan sa drugim mobilnim -ovima i platformama kao što su PhoneGap, Worklight[4] I druge.

Remove ads

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 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 .
  • UI -i koji su optimizovani za ekrane koji su osetljivi na dodir i specifični za platformu.


Remove ads

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 -ja stranice kao atributa(npr. href="#second" ).


U istom primeru, druga dva -atributa su korišćena. Atribut data-theme obaveštava pregledače o temi koju renderuje, a atribut data-add-back-btn dodaje 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 -atributa korišćenih u ovom primeru:

data-role – objašnjava ulogu elementa, kao što su , , , 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 () ili dnu ().

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>
Remove ads

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

Више информација Phone Gap, Opera Mobile ...


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.



Remove ads

Reference

Spoljašnje veze

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads
Remove ads