SZABADKAI MŰSZAKI SZAKFŐISKOLA PREZENTÁCIÓ E-mobil tantárgyból Jquery Mobil Keretrendszer JELÖLT MENTOR Kokrehel Grácián dr Zlatko Čović 12213218 SZABADKA, 2015.
Tartalomjegyzék Bevezető... 3 Sajátosságok... 4 Alkalmazása... 5 Jellegzetessége... 6-7 Theme-Roller... 7 Hátrányok... 8
BEVEZETŐ A Jquery Mobile érintőképernyőre optimalizált webes keretrendszer (mobile keretrendszerként is ismeretes), még pontosabban Javascript könyvtár. A jquery csapata fejleszti jelenleg. A fejlesztés célja egy olyan keretrendszer ami széleskörüen kompatibilis a különböző okostelefonok tablettek körében, leginkább a gyorsan fejlődő eszközök tették szükségessé. A Jquery Mobile kompatibilis más mobil alkalmazás keretrendszereivel és platformaival. Mint pl. PhoneGap és Worklight. jquery Mobile framework takes the "write less, do more mantra to the next level. Jquery Team
SAJÁTOSSÁGOK Kompatibilis minden jelentősebb böngészővel, valamint az összes jelentősebb mobil platformmal, mint az Android, IOS, Windows Phone, Blackberry, Webos, Symbian Egyszerű megtanulni mert a jquery-re épül, ezért a szintaxis már sokak számára ismeretes Témázási keretrendszer, ami lehetővé teszi a témák létrehozását Kevés függőséggel rendelkezik és pehelysúlyú a sebesség érdekében Ugyanaz a kódalap bármilyen képernyőre átméreteződik HTML5 alapú konfiguráció az oldalak elrendezése, minimális scripteléssel AJAX alapú navigáció, animált oldalátmenetek, amik lehetővé teszik a szemantikus URL- ok létrehozását push Staten keresztül Érintésre optimalizált és platform független felhasználói interfészek
ALKALMAZÁSA Két féleképp lehet a Jquery Mobile könyvtárat hozzáadni a weboldalunkhoz: link a Jquery Mobile hivatalos oldalán levő könyvtárra link a számítógépen tárolt könyvtárra A hivatalos oldalra mutató link a jobbik megoldás mert, ha frissítés történik a könyvtárban akkor nem kell újra letölteni a fájlt. Csatolni kell a viewport jelölőelemet a megfelelő renderelés és éríntés zoom végett. <meta name="viewport" content="width=device-width, initial-scale=1"> A Jquery Mobile használatához szükség van a Jquery könyvtárára is, máskülönben nem müködik. példa: <head> <!-- Include meta tag to ensure proper rendering and touch zooming --> <meta name="viewport" content="width=device-width, initialscale=1"> <!-- Include jquery Mobile stylesheets --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- Include the jquery library --> <script src="http://code.jquery.com/jquery- 1.11.3.min.js"></script> <!-- Include the jquery Mobile library --> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile -1.4.5.min.js"></script> </head>
Jellegzetessége The data role: "page" a lap ami megjelenik a böngészőben "header" létrehoz egy eszköztárat a lap tetején (gyakran használják címnek vagy kereső gombnak) "main" definiálja az oldal tartalmát, mint szöveg, képek, gombok, formok, stb. "footer" létrehoz egy eszköztárat a lap alján The data theme: "a" "b"
The data position (hol lesz majd renderelve): "fixed" "top" "bottom" The data transition: "fade" az alapértelmezett, kifakul a következő oldalra "flip" átdobódik a másik oldalra "flow" az aktuális oldal kimegy és a következő oldal bejön "pop" mint felugró ablak megy a következő lapra The data icon : meghatároz egy ikont a többi beépített közül Theme Roller Több féle stílus összehasonlítását, színek kombinációját a különböző elemeken (gombok, szövegek, beviteli mezők, stb) teszi lehetőve. Mindent betudunk állítani mi magunk kódolás nélkül. A műveelt végén letölthető a számunkra megfelelő téma stíluslapja. http://themeroller.jquerymobile.com/
Hátrányok A legelső kérdés amit fel kell tenünk magunknak, hogy miért használjam a jquery-t, mert veszélyeket takat: A Jquerynek nagy közössége van, de kicsi a tanulási görbéje. És ebből fakadóan sok az olyan nyíltforráskódú gyöngén megírt lassú alkalmazás. Csökken a kód minősége. Könnyű össze-vissza írkálni a kódot, ezzel veszitve a hatékonyságból A Jquey nagyon nagy könyvtár a legtöbb esetben apró részleteket használunk mégis az egész könyvtárat inkludolni kell, sok biteot lehet megtakarítani, ha széleskörűen használjuk Megoldás: Először legyünk tisztában az alapokkal és így elkerülhetjük azt a híbát amit sok kezdő programozó nem tesz meg. Lehet, hogy könnyebb a jquery-ben kódolni, de nem minden esetben kifizetődő.
FELHASZNÁLT IRODALOM W1. www.jquerymobile.com W2. www.w3schools.com/jquerymobile W3. www.en.wikipedia.org/wiki/jquery_mobile