JQuery Mobile - JQuery Mobile

jQuery Mobile
JQuery mobile logo.svg
VývojářiTým jQuery
První vydání16. října 2010 (2010-10-16)[1]
Stabilní uvolnění
1.4.5 / 31. října 2014 (2014-10-31)
Náhled verze
1.5.0-rc1 / 10. září 2018 (2018-09-10)
Úložiště
Upravte to na Wikidata
NapsánoJavaScript
PlošinaVidět Podpora mobilního prohlížeče
Velikost351 KB / 142 KB (minified) / 40 KB (minified, gzipped)
TypRámec pro mobilní aplikace
LicenceMIT[2]
webová stránkajquerymobile.com

jQuery Mobile je dotek -optimalizováno webový rámec (také známý jako mobilní rámec), konkrétněji a Knihovna JavaScript, vyvinutý společností jQuery projektový tým. Vývoj se zaměřuje na vytvoření rámce kompatibilní s širokou paletou chytré telefony a tabletové počítače,[3] nezbytné díky rostoucímu, ale heterogennímu trhu tabletů a smartphonů.[4] Rámec jQuery Mobile je kompatibilní s jinými rámci mobilních aplikací[5] a platformy jako PhoneGap, Pracovní světlo[6] a více.

Funkce

  • Kompatibilní se všemi hlavními prohlížeči pro stolní počítače i se všemi hlavními mobilními platformami, včetně Android, iOS, Windows Phone, Ostružina, WebOS, Symbian.
  • Postaveno nahoře jQuery jádro, 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 témat.
  • Omezené závislosti a nízká hmotnost pro optimalizaci rychlosti.
  • Stejný základní kódový základ se automaticky změní na libovolnou obrazovku.
  • Konfigurace založená na HTML5 pro rozložení stránek s minimálním skriptováním.
  • AJAX -poháněná navigace s animovanými přechody stránek, která poskytuje schopnost vytvářet sémantické adresy URL prostřednictvím pushState.
  • Widgety uživatelského rozhraní, které jsou dotykově optimalizované a agnostické pro platformu.

(Zdroj: z webu jQuery Mobile)[3]

Příklad použití

$('div').na('klepnout', funkce(událost){  výstraha('prvek poklepán');});
$(dokument).připraven(funkce(){    $('.myList li').na('click touchstart', funkce() {        $('.myDiv').sklouznout dolů('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 šablonu stylů (soubory lze stáhnout a hostovat místně, ale doporučuje se odkazovat na soubory hostované v jQuery CDN ).

Obrazovka projektu je definována a sekce Prvek HTML5 a datová role z strana. Všimněte si, že datová role je příkladem HTML5 data atribut, v tomto případě definovaný jQuery Mobile. Stránka může mít záhlaví a zápatí prvky s datová role z záhlaví a zápatí, resp. Mezi tím může být článek prvek, s a role z hlavní a a třída z obsah ui. A konečně, a nav prvek, s datová role z navbar může být přítomen.

Jeden dokument HTML může obsahovat více než jeden sekce prvek, a tedy více než jeden obsah. Tímto způsobem je nutné načíst pouze jeden soubor, který obsahuje více stránek s obsahem. Jedna stránka může odkazovat na jinou stránku ve stejném souboru odkazem na atribut id stránky (např. href = "# sekunda").

V níže uvedeném příkladu jsou použity dva další atributy dat. The datové téma atribut říká prohlížeči, jaké téma má vykreslit. The data-add-back-btn atribut přidá na stránku tlačítko Zpět, pokud je nastaveno na skutečný.

Nakonec lze k prvkům přidávat ikony pomocí ikona dat atribut. jQuery Mobile má zabudováno padesát běžně používaných ikon.

Stručné vysvětlení atributů dat použitých v tomto příkladu:

datová role - Určuje roli prvku, například záhlaví, obsah, zápatí atd.

datové téma - Určuje, které návrhové téma se má použít pro prvky v kontejneru. Lze nastavit na: a nebo b.

datová pozice - 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í).

datový přechod - Určuje jednu z deseti předdefinovaných animací, které se mají použít při načítání nových stránek.

ikona dat - Určuje jednu z padesáti předdefinovaných ikon, které lze přidat k prvku.

 1<!doctype html> 2<html> 3    <hlava> 4		<meta znaková sada="utf-8"> 5		<titul>jQuery Mobile Příklad</titul> 6		<meta název=„výřez“ obsah="initial-scale = 1, user-scalable = no, width = device-width"> 7		<odkaz rel="styly" href=„https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css“>		 8    </hlava> 9 10    <tělo>11        <sekce datová role="strana" id="První" datové téma="A">12            <záhlaví datová role="záhlaví" datová pozice="pevný">13                <h1>Stránka 1 Záhlaví</h1>14            </záhlaví>15 16            <článek role="hlavní" třída="ui-content">17                <h2>Ahoj světe!</h2>18                <A href="#druhý" datová role="knoflík" data-inline="skutečný" datový přechod="tok" ikona dat="carat-r" data-iconpos="že jo">Přejít na stránku 2</A>19            </článek>20 21            <zápatí datová role="zápatí" datová pozice="pevný">22                <h4>Page 1 Zápatí</h4>23            </zápatí>24        </sekce>25 26        <sekce datová role="strana" id="druhý" datové téma=„b“>27            <záhlaví datová role="záhlaví" datová pozice="pevný"  data-add-back-btn="skutečný">28                <h1>Stránka 2 Záhlaví</h1>29            </záhlaví>30 31            <článek role="hlavní" třída="ui-content">32                <h2>Ukázková stránka</h2>33            </článek>34 35            <zápatí datová role="zápatí" datová pozice="pevný">36                <h4>Page 2 Zápatí</h4>37            </zápatí>38        </sekce>39		<skript src=„https://code.jquery.com/jquery-1.11.1.min.js“></skript>40		<skript src=„https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“></skript>41    </tělo>42</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žívat jQuery Mobile ThemeRoller[7] aplikace k přizpůsobení těchto vzhledů a vytváření značkových zážitků. Po vytvoření motivu v aplikaci ThemeRoller si mohou programátoři stáhnout vlastní soubor CSS a zahrnout ho do svého projektu, aby mohli používat vlastní motiv.[8]

Každé téma může obsahovat až 26 jedinečných barevných „vzorníků“, z nichž každý se skládá z pruhu záhlaví, těla 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 pouze s jedním vzorníkem na téma. Přepínání mezi různými vzorky v rámci motivu je stejně snadné jako přidání atributu s názvem „data-theme“ k prvkům HTML.

Výchozí motiv jQuery Mobile přichází se dvěma různými vzorníky barev, pojmenovanými „a“ a „b“. Zde je příklad toho, jak vytvořit panel nástrojů se vzorníkem „b“:

<div datová role=„záhlaví“ datové téma=„b“> 	<h1>Název stránky</h1> </div>

(Zdroj: z webu jQuery Mobile)[3]

Existuje již několik témat stylu otevřeného zdroje, která jsou vyvíjena a podporována organizacemi třetích stran. Jedním z takových motivů stylu otevřeného zdroje je téma stylu Metro, které vyvinula a vydala společnost Microsoft Open Technologies, Inc.[9] Téma stylu Metro má napodobovat uživatelské rozhraní Metro (designový jazyk) Microsoft používá ve svých mobilních operačních systémech.

Podpora mobilního prohlížeče

PlošinaVerzeRodákMezera v telefonuOpera MobileOpera MiniFenekOzónČistá přední strana
0.98.5, 8.659.5104.05.01.01.1*0.94.0
iOSv2.2.1AA
v3.1.3, v3.2AAA
v4-7.0AAA
Symbian S60v3.1, v3.2AAAAACC
v5.0CCCACA
Symbian UIQv3.0, v3.1C
8.65		C
v3.2CC
Platforma Symbianv.3.0A
BlackBerry OSv4.5CCC
v4.6, v4.7CCCB
v5.0BACA
v6.0AAA
Androidv1.5, v1.6AA
v2.1AA
v2.2AAA*C*A*
Windows Mobilev6.1CCCCBCBC
v6.5.1CCCAACA
v7.0AACA
webOS1.4.1AA
bada1.0A
Maemo5.0BBCB *
MeeGo1.1*A*A*A*

Klíč:

  • A - vysoká kvalita. Prohlížeč, který je schopen minimálně využívat mediálních dotazů (požadavek pro jQuery Mobile). Tyto prohlížeče budou aktivně testovány, ale nemusí dostávat všechny funkce jQuery Mobile.
  • B - střední kvalita. Schopný prohlížeč, který nemá dostatek podílu na trhu, aby zaručil každodenní testování. Opravy chyb budou i nadále použity, aby těmto prohlížečům pomohly.
  • C - nízká kvalita. Prohlížeč, který není schopen využívat dotazy médií. Nebudou jim poskytnuty žádné skripty jQuery Mobile nebo CSS (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)[3]

Historie vydání

Datum vydáníČíslo verze
16. října 20101.0.0 Alfa 1
12. listopadu 20101.0.0 Alfa 2
4. února 20111.0.0 Alfa 3
31. března 20111.0.0 Alfa 4
7. dubna 20111.0.0 Alfa 4.1
20. června 20111.0.0 Beta 1
3. srpna 20111.0.0 Beta 2
8. září 20111.0.0 Beta 3
29. září 20111.0.0 RC1
19. října 20111.0.0 RC2
13. listopadu 20111.0.0 RC3
16. listopadu 20111.0.0
26. ledna 20121.0.1
28. února 20121.1.0 RC1
6. dubna 20121.1.0 RC2
13.dubna 20121.1.0
28. června 20121.1.1 RC1
12. července 20121.1.1
1. srpna 20121.2.0 Alfa
5. září 20121.2.0 Beta
14. září 20121.2.0 RC1
21. září 20121.2.0 RC2
2. října 20121.2.0
14. ledna 20131.3.0 Beta
4. února 20131.3.0 RC1
20. února 20131.3.0
19. března 20131.1.2
22. března 20131.2.1
10. dubna 20131.3.1
19. července 20131.3.2
25. července 20131.4.0 Alfa 1
15. srpna 20131.4.0 Alfa 2
24. září 20131.4.0 Beta 1
24. října 20131.4.0 RC 1
23. prosince 20131.4.0
12. února 20141.4.1
28. února 20141.4.2
1. července 20141.4.3
12. září 20141.4.4
31. října 20141.4.5 (Nejnovější stabilní verze)
3. ledna 20171.5.0-alfa.1

Viz také

Reference

  1. ^ Nadace jQuery - jquerymobile.com (16. 10. 2010). „Vydána aplikace jQuery Mobile Alpha 1“. blog.jquerymobile.com. Citováno 2014-05-22.
  2. ^ jQuery Foundation - jquery.org (10.09.2012). „Změny licencování jQuery“. Blog.jquery.com. Citováno 2013-10-09.
  3. ^ A b C d „Podpora mobilních prohlížečů“.
  4. ^ „Globální vzestup smartphonu“.
  5. ^ „Odpověď, proč je jQuery Mobile vhodný pro vývoj mobilních webových aplikací“.
  6. ^ „IBM Worklight - USA“. Worklight.com. Citováno 2013-10-09.
  7. ^ „ThemeRoller“.
  8. ^ „JQuery Mobile Theming Overview“.
  9. ^ „Další novinky od MS Open Tech: oznamujeme téma stylu open source Metro pro jQuery Mobile“.

Další čtení

externí odkazy