přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (34) – základ mobilní aplikace v jQuery Mobile

jQuery (34) – základ mobilní aplikace v jQuery Mobile

jQuery

Po minulém teoretickém úvodu se podíváme, jak pomocí jQuery Mobile vytvořit jednoduchou mobilní webovou aplikaci. 


Kostra aplikace

Když se podíváte do minulého dílu seriálu, najdete tam informace o základních konceptech frameworku. Ty nyní „přetavíme“ do skutečné mobilní webové aplikace. Kostra úplně nejjednodušší aplikace vypadá nějak takto:

<!doctype html>
<html>
  <head>
    <title>Nejjednodušší aplikace</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile.min.css">
    <link rel="stylesheet" href="css/app.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile.min.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header"></div>
      <div role="main" class="ui-content"></div>
      <div data-role="footer"></div>
    </div>
  </body>
</html>

Zmínku si zaslouží hned několik věcí. V první řadě je to meta tag viewport, který říká, jak se má stránka zobrazovat. V tomto případě se bude vycházet z šířky zařízení a výchozí škálování bude této šířce odpovídat. Dále tu máme odkazy na javascriptové soubory – tam je potřeba vložit základní jQuery, jQuery Mobile a soubor(y) aplikace; nesmí se zapomenout ani na stylopisové soubory CSS.

Soubory jQuery a jQuery Mobile lze samozřejmě vložit i z CDN, nemusejí se vkládat lokálně, jako je tomu v příkladu.

Vlastní kostra aplikace má tady úplně základní podobu (bez dalších obsahových součástí), ale s uvedením všech tří hlavních prvků. Jak se můžete přesvědčit, zobrazí se tři prázdné prvky s výchozím nastylováním.

Pro testování mobilních aplikací můžete používat například funkci Responzivní design z vývojářských nástrojů v prohlížeči Mozilla Firefox. Obdobnou funkcí disponují i prohlížeče Google Chrome a Chromium.

Základ aplikace bez obsahu Základ aplikace bez obsahu

Aplikace s obsahem

Do aplikace nyní přidáme nějaký obsah. V hlavičce stránky bude titulek, v patičce stavový řádek, v těle nějaký text. Na obrázku je vidět, jak zafunguje základní nastylování. Pokud vám nevyhovuje, můžete si ho změnit podle potřeby.

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Aplikace</h1>
    </div>
    <div role="main" class="ui-content">
      <p>
        Lorem ipsum…
      </p>
    </div>
    <div data-role="footer">
      <p>Aplikace připravena</p>
    </div>
  </div>
</body>

Aplikace s obsahem Aplikace s obsahem

Změnou rozlišení se můžete přesvědčit, jak funguje responzibilita. Vzhled aplikace se automaticky přizpůsobí (i když v tomto případě je to velmi primitivní).

Aplikace po změně rozlišení displeje Aplikace po změně rozlišení displeje

Ve výchozím stavu aplikace stále vypadá jako stránka, čili patička následuje za tělem a není navázána na dolní hranu obrazovky. Totéž se týká i hlavičky, ta je zase vždy na začátku stránky. V budoucnu se podíváme i na to, jak to změnit.

Ovládací prvky

Nyní zkusíme přidat do aplikace nějaké ovládací prvky. Používá se k tomu deklarativní přístup, do HTML se tedy vloží požadované elementy a u nich se nastaví atribut data-role. Framework jQuery Mobile z nich automaticky vytvoří widgety. Takto může vypadat tělo stránky:

<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">První položka</a></li>
<li><a href="#">Druhá položka</a></li>
<li><a href="#">Třetí položka</a></li>
</ul>
<div>
<a href="#" data-role="button" data-icon="plus">Tlačítko</a>
</div>
</div>

Toto tělo obsahuje seznam položek a tlačítko. Že se z obyčejného seznamu (ul) stane seznam zpracovávaný frameworkem, říká jeho role listview. Nastavení data-inset na true způsobí, že položky „vylezou“ nad pozadí, nastavení atributu data-filter přidá možnost položky filtrovat (filtr standardně funguje hned při psaní). Ohledně tlačítka lze říct jen to, že atribut data-icon nastaví jeho ikonu. Zde je výsledek:

Aplikace s ovládacími prvky Aplikace s ovládacími prvky

Oživení aplikace

Příště se podíváme, jak takto vytvořenou aplikaci oživit, přidat jí interaktivitu.



Nahoru

Přidat téma diskuse

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz

Lukáš Jelínek

Lukáš Jelínek

Dlouholetý člen autorského týmu LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře, podniká v oblasti IT a zároveň pracuje v týmu projektu Turris. Ve volném čase rád fotografuje, natáčí a stříhá video, občas se věnuje powerkitingu a na prahu čtyřicítky začal hrát tenis.


  • Distribuce: Debian, Kubuntu, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog



Public Relations

Propojování hardwaru a softwaru, které opravdu baví

Eva FišerováKdyby před pár lety nenavštívila veletrh pracovních příležitostí, pravděpodobně by Eva Fišerová, v té době ještě studentka matematiky na Západočeské univerzitě v Plzni, o práci ve společnosti Siemens Advanta nikdy neuvažovala. Tato firma jí však, jak se říká, padla do oka. Nyní v ní pracuje již třetím rokem a s náplní práce i pracovními podmínkami je nadmíru spokojená.

Pokračování ...



Public Relations

„Hackněte“ cenu za telefon Nokia 7.2. Ušetříte polovinu ceny!

NokiaNokia 7.2Sháníte dobře vybavený telefon? Střední třídu se všemi funkcemi, špičkovým fotoaparátem a perfektní výbavou? A přitom byste se rádi dostali pod pět tisíc korun? Nebo dokonce pod tři a půl tisíce korun? Máme pro vás skvělý tip, jen si musíte pospíšit!

Pokračování ...


Redakční blog

Pavel Fric

Pavel Fric, 10. April

Zapojte se do tvorby distribuce Mageia

Podílejte se na vytváření balíčků pro Mageiu, dělejte, co je potřeba, staňte se baličem


Pavel Fric

Pavel Fric, 13. March

Lollypop

Lollypop je hudební přehrávač navržený, jak ukazuje jeho podoba, aby výborně zapadl do pracovního...


Pavel Fric

Pavel Fric, 26. February

QElectroTech

Kreslení elektrotechnických i jiných výkresů


Všechny blogy »


Public Relations

Windows 10 Genuine Lifetime License pouze €12 (315 Kč), skvělé slevy až 91 %!

Windows 10Přestože už tu bude co nevidět systém Windows 11, je nyní ten správný čas na získání Windows 10, protože všichni současní majitelé Windows 10 již brzy dostanou bezplatný upgrade na Windows 11.

Pokračování ...