jQuery Mobile - jQuery Mobile
 | |
| Vývojáři | Tým jQuery |
|---|---|
| První vydání | 16. října 2010 |
| Stabilní uvolnění | 1.4.5 / 31. října 2014
|
| Náhled vydání | 1.5.0-rc1 / 10. září 2018
|
| Úložiště | |
| Napsáno | JavaScript |
| Plošina | Viz Podpora mobilního prohlížeče |
| Velikost | 351 KB / 142 KB (zmenšeno) / 40 KB (zmenšeno, gzip) |
| Typ | Rámec pro mobilní aplikace |
| Licence | MIT |
| webová stránka | jquerymobile |
jQuery Mobile je webový framework optimalizovaný pro dotyky (také známý jako mobilní framework), konkrétně knihovna JavaScript , vyvinutá týmem projektu jQuery . Vývoj se zaměřuje na vytvoření rámce kompatibilního s celou řadou chytrých telefonů a tabletových počítačů , který je nezbytný kvůli rostoucímu, ale heterogennímu trhu s tablety a smartphony. Rámec jQuery Mobile je kompatibilní s jinými rámci a platformami mobilních aplikací, jako jsou PhoneGap , Worklight a další.
Funkce
- Kompatibilní se všemi hlavními desktopovými prohlížeči a všemi hlavními mobilními platformami, včetně Android , iOS , Windows Phone , Blackberry , WebOS , Symbian .
- Postaveno na jádru jQuery, takže má minimální křivku učení pro lidi, kteří již znají syntaxi jQuery.
- Tematický rámec, který umožňuje vytváření vlastních motivů.
- Omezené závislosti a nízká hmotnost pro optimalizaci rychlosti.
- Stejná základní kódová základna se automaticky změní na libovolnou obrazovku.
- Konfigurace založená na HTML5 pro rozložení stránek s minimálním skriptováním.
- Navigace s podporou AJAX s animovanými přechody stránek, která poskytuje možnost vytvářet sémantické adresy URL prostřednictvím pushState.
- Widgety uživatelského rozhraní, které jsou optimalizované pro dotek a agnostické pro platformu.
(Zdroj: z webu jQuery Mobile)
Příklad použití
$('div').on('tap', function(event){
alert('element tapped ');
});
$(document).ready(function(){
$('.myList li').on('click touchstart', function() {
$('.myDiv').slideDown('500');
});
});
Základní příklad
Následuje základní projekt jQuery Mobile využívající sémantické prvky HTML5 . Je důležité propojit knihovny jQuery a jQuery Mobile JavaScript a šablony stylů (soubory lze stáhnout a hostovat lokálně, ale doporučuje se propojit se soubory hostovanými na jQuery CDN ).
Obrazovka projektu je definován sectionHTML5 prvek, a data-rolez page. Všimněte si, že toto data-roleje příklad dataatributu HTML5 , v tomto případě definovaném jQuery Mobile. Stránka může mít headeri footerprvky s data-roleo headera footer, v tomto pořadí. Mezi tím může být articleprvek s roleo maina classo ui-content. A konečně, je navprvek, se data-rolez navbarmohou být přítomny.
Jeden dokument HTML může obsahovat více než jeden sectionprvek, a tedy více než jednu obrazovku obsahu . Tímto způsobem je nutné načíst pouze jeden soubor, který obsahuje více stránek obsahu. Jedna stránka může odkazovat na jinou stránku ve stejném souboru odkazem na atribut id stránky (např. href="#second").
V níže uvedeném příkladu jsou použity dva další datové atributy. data-themeAtribut říká prohlížeči, co téma pro renderování. data-add-back-btnAtribut přidá tlačítko zpět na stránku, pokud nastaven true.
A konečně, ikony lze k data-iconatributům přidávat pomocí atributu. jQuery Mobile má integrováno padesát běžně používaných ikon.
Stručné vysvětlení datových atributů použitých v tomto příkladu:
data-role -Určuje roli prvku, například záhlaví, obsah, zápatí atd.
data-theme -Určuje, které téma návrhu použít pro prvky v kontejneru. Lze nastavit na: a nebo b.
data-position -Určuje, zda má být prvek opraven, v takovém případě se vykreslí nahoře (pro záhlaví) nebo dole (pro zápatí).
data-transition -Určuje jednu z deseti vestavěných animací, které se mají použít při načítání nových stránek.
data-icon -Určuje jednu z padesáti integrovaných ikon, které lze přidat k prvku.
<!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="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</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 role="main" class="ui-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 role="main" class="ui-content">
<h2>Example Page</h2>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Page 2 Footer</h4>
</footer>
</section>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
Theming
jQuery Mobile poskytuje tematický rámec, který umožňuje vývojářům přizpůsobit barevná schémata a určité aspekty CSS funkcí uživatelského rozhraní. Vývojáři mohou použít aplikaci jQuery Mobile ThemeRoller k přizpůsobení těchto vzhledů a vytváření značkových prostředí. Po vývoji tématu v aplikaci ThemeRoller si mohou programátoři stáhnout vlastní soubor CSS a zahrnout jej do svého projektu, aby mohli používat své vlastní téma.
Každý motiv může obsahovat až 26 jedinečných barevných „vzorníků“, z nichž každý se skládá z lišty záhlaví, textu obsahu a stavů tlačítek. Kombinace různých vzorníků umožňuje vývojářům vytvářet širší škálu vizuálních efektů, než by dokázali s jediným vzorníkem na jedno téma. Přepínání mezi různými vzorníky v rámci motivu je stejně jednoduché jako přidání atributu s názvem „datové téma“ do prvků HTML.
Výchozí motiv jQuery Mobile je dodáván se dvěma různými barevnými vzorky, pojmenovanými „a“ a „b“. Zde je příklad, jak vytvořit panel nástrojů pomocí vzorníku „b“:
<div data-role="header" data-theme="b">
<h1>Page Title</h1>
</div>
(Zdroj: z webu jQuery Mobile)
Existuje již několik témat stylu open source, která jsou vyvíjena a podporována organizacemi třetích stran. Jedním z takových témat stylu open source je téma stylu Metro, které bylo vyvinuto a vydáno společností Microsoft Open Technologies, Inc. Téma stylu Metro má napodobovat uživatelské rozhraní Metro (designový jazyk), které Microsoft používá ve svých mobilních operačních systémech.
Podpora mobilního prohlížeče
| Plošina | Verze | Rodák | Mezera v telefonu | Opera Mobile | Opera Mini | Fenek | Ozón | Síť vpředu | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 | 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 8,65 |
C | |||||||||
| v3.2 | C | C | ||||||||||
| Platforma Symbian | 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* | A* | A* | A* | ||||||||
Klíč:
- A - Vysoká kvalita. Prohlížeč, který dokáže minimálně využívat mediální dotazy (požadavek pro jQuery Mobile). Tyto prohlížeče budou aktivně testovány, ale nemusí získat všechny funkce jQuery Mobile.
- B - střední kvalita. Schopný prohlížeč, který nemá dostatečný podíl na trhu, aby zaručoval každodenní testování. Opravy chyb budou i nadále použity v těchto prohlížečích.
- C - Nízká kvalita. Prohlížeč, který není schopen využívat mediální dotazy. Nebudou jim poskytovány žádné skripty jQuery Mobile nebo CSS (přecházející zpět na prostý HTML a jednoduchý CSS).
- * - Připravovaný prohlížeč. Tento prohlížeč ještě není vydán, ale je v testování alfa/beta.
(Zdroj: z webu jQuery Mobile)
Historie vydání
Viz také
Reference
Další čtení
- Doyle, Matt (18. března 2014). Master Mobile Web Apps s jQuery Mobile (4. vydání). Vznešené knihy. p. 567. ISBN 978-0-9873115-3-5.
- Pelletier, Jeff (25. dubna 2013). Mobile App Manual: The Blueprint (1. vyd.). Withinsight Publishing . p. 96. ISBN 978-0989072106.
- Bai, Giulio (23. června 2011). První pohled jQuery Mobile (1. vydání). Packt Publishing . p. 216. ISBN 1-84951-590-5.
- Reid, Jon (7. července 2011). jQuery Mobile (1. vydání). O'Reilly Media . p. 130 . ISBN 1-4493-0668-3.
- David, Matthew (21. září 2011). Webové stránky pro mobily HTML5: Přeplňování HTML5 pomocí jQuery Mobile, Sencha Touch a dalších rámců (1. vydání). Focal Press . p. 250 . ISBN 0-240-81813-X.
- Broulik, Brad (30. listopadu 2011). Pro jQuery Mobile (1. vydání). Stiskněte . p. 350. ISBN 1-4302-3966-2.
- Holzner, Steven E. (2. ledna 2012). Sams Teach Yourself jQuery Mobile za 10 minut (1. vydání). Sams . p. 240. ISBN 0-672-33557-3.
- Firtman, Maximiliano (31. ledna 2012). jQuery Mobile: Up and Running (1. vydání). O'Reilly Media . p. 250. ISBN 1-4493-9765-4.
- Dutson, Phil (13. července 2012). Sams Teach Yourself jQuery Mobile za 24 hodin (1. vydání). Sams . p. 475. ISBN 0-672-33594-8.
- de Jonge, Adriaan, Dutson, Phillip (2. listopadu 2012). jQuery, jQuery UI a jQuery Mobile: Recepty a příklady (1. vydání). Addison-Wesley Professional . p. 400. ISBN 978-0-321-82208-6.