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

Alvao

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 a podniká v oblasti informačních technologií. 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, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog



Public Relations

Síť Wi-Fi pro celou domácnost a bez starostí aneb Nejmodernější technologie nemusí být nutně složitá

SynologySynology Mesh Router MR2200ac není jen jeden z dalších systémů Wi-Fi. Jde o první směrovač Wi-Fi s certifikací WPA3. Je čas na lepší síť Wi-Fi a bezpečnější internet.
Zařízení MR2200ac s inteligentní sítí Mesh Wi-Fi a nejlepšími možnostmi rodičovské kontroly v odvětví je navrženo tak, aby zajistilo připojení a bezpečnost pro všechna vaše zařízení i uživatele.

Pokračování ...


Alvao