jQuery Mobile: udělejte si mobilní verzi
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

jQuery Mobile: udělejte si mobilní verzijQuery Mobile: udělejte si mobilní verzi

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

jQuery Mobile: udělejte si mobilní verzi

Google       Google       21. 11. 2011       17 067×

Nasadit mobilní verzi webu je od teď o něco jednoduší. Nemusíte vymýšlet design, ani optimalizovat ovládání pro malé mobilní displeje. Celou mobilní verzi snadno navrhnete a zprovozníte pomocí platformy jQuery Mobile.

Reklama
Reklama

Stačí se držet zásad platformy jQuery Mobile. Dodržovat jasnou strukturu kódu (HTML5). Kód je čistý a snadno udržovatelný, veškeré vlastnosti jQuery Mobile se nastavují v atributech prvků, jednoduše tak změníte chování i vzhled mobilní verze.

Základní kód

Základní struktura kódu počítá s prvkem pro stránku, ve které jsou zanořeny prvky pro hlavičku, obsahovou část a patičku. Sympatické je, že jednoduše pomocí pár atributů můžete odlišit barvu hlavičky či patičky, nebo je udělat fixní – budou napevno u horní nebo dolní části displeje.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Hello world</p>		
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Pět výchozích barev

jQuery Mobile nabízí pět barevných schémat. Pokud vám nebude žádné vyhovovat, můžete si vzhled kompletně navrhnout znovu – pomocí ThemeRoller, které vývojáři připravili speciálně pro jQuery Mobile.

Ovládací prvky

Nemusíte vymýšlet vzhled inputů, tlačítek, posuvníků, listboxů, ani textových polí. O všechny prvky se postará samotná knihovna. Prvky zobrazí dostatečně velké, v duchu iPhone aplikací. Ovládání na mobilních zařízeních je tak dostatečně pohodlné.

K dispozici také máte sadu nejrůznějších ikon, položkové seznamy, které mohou být doplněny o bubliny, obrázky, různé formátování a mnoho dalšího. Možnosti kombinací jsou téměř neomezené, různé vlastnosti můžete kombinovat a pak se jen radovat z toho, jak vývojáři nad knihovnou skutečně přemýšleli, nebo spíš při jejím návrhu.

To hlavní z jQuery Mobile

  • Vyžaduje jQuery 1.6.4, pro příští verzi jQuery Mobile 1.1 je plánována podpora novější jQuery 1.7
  • Vzhled je minimalistický, bez zbytečných obrázků – pozitivní pro rychlost načítání
  • Modulární návrh platformy umožňuje snadno vynechat nějakou část, kterou nepotřebujete
  • Podpora responzivního designu
  • Navigační systém založený na Ajaxu umožňuje animované přechody mezi stránkami, přidání mezi záložky, nabízí plně funkční tlačítko „zpět“ a čisté URL díky pushState
  • Přístupnost WAI-ARIA
  • Podpora dotykových zařízení a událostí myši

Kompatibilita s mobilními zařízeními

jQuery se pyšní podporou všech moderních desktopových prohlížečů, smartphonů, tabletů a e-čteček. Existuje tzv. tříúrovňový model podpory:

Nejvyšší „A“ nabízí plné fungování, včetně Ajaxu a animovaných přechodů mezi stránkami. Patří sem nové verze Apple iOS, Android, Blackberry, Windows Phone, Chrome, Firefox, Internet Explorer, Opera Desktop, Opera Mobile, Meego, Kindle a další.

O něco nižší stupeň „B“ nepodporuje ajaxovou navigaci, týká se to starších Blackberry 5, Opery Mini 5 a 6 a Nokie Symbian. Nejnižší stupeň „C“ nabízí pouze základní zobrazení stránek, bez všech vychytávek, ale stále čitelné. Patří sem starý Windows Mobile, čtvrtá verze Blackberry a všechny starší smartphony.

Ještě tu máme poslední část – oficiálně nepodporované platformy. Konkrétně se jedná o Samsung Bada, kde weby sice mohou fungovat, ale nelze to zaručit. jQuery Mobile zatím nebylo na této splatformě testováno ani odladěno.

Vývoj a budoucnost

První veřejná alpha verze jQuery Mobile se objevila 16. října 2010. Po více než roce vyšla finální verze 1.0. Ještě v posledních RC verzích vývojáři zvýšili výkon o desítky procent, což je zajisté pozitivní zpráva. Někteří uživatelé si přesto stěžují na „trhané“ ovládání, vývojáři ale pravděpodobně i s tímto v budoucnu něco provedou. Je to první finální verze, které musíme ledacos odpustit.

Autoři s platformou mají očividně velké plány, nezbývá proto nic jiného, než jim držet palce a doufat, že vývoj půjde správným směrem. Vytváření mobilních verzí tak může být v budoucnu mnohem pohodlnější a pro uživatele přínosnější, než by se před pár lety mohlo zdát. Příště se proto podíváme více pod kapotu jQuery Mobile a vysvětlíme si, jak s ním pracovat. Zatím si můžete vyzkoušet demo verzi.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

2 názory  —  2 nové  
Hlasování bylo ukončeno    
16 hlasů
Google
(fotka) Zdeněk VečeřaAutor publikuje na Programujte.com a Živě.cz, zabývá se vývojem a použitelností internetových aplikací a stará se o spokojenost návštěvníků Laser Game v Brně.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Influenceři? Značce mohou pomoci, ale také ji poškodit

Influenceři? Značce mohou pomoci, ale také ji poškodit

Influenceři hýbou současným marketingem. Firmy do nich investují nemalé peníze v očekávání návratnosti. Správně nastavená spolupráce s influencerem může značce opravdu velmi pomoci, ale také naopak. Podmínkou je k tomu přistupovat s citem. Podle odborníků je stále diskutovaným tématem také přiznání spolupráce

Reklama
Reklama
Obrázek ke článku GoPay uvede automatické čtení údajů z dokladů, použije řešení studenta, který s ním uspěl v IT SPY

GoPay uvede automatické čtení údajů z dokladů, použije řešení studenta, který s ním uspěl v IT SPY

Vymyslet aplikaci, která pohodlně vyčte data z identifikačních dokladů, aby je jejich držitel nemusel složitě přepisovat. To byl jeden z prvních úkolů Miroslava Bartyzala, když nastoupil jako juniorský Java programátor do GoPay. Bartyzal nakonec projektu, který mu zabral více než 2200 hodin, věnoval svou diplomovou práci na Přírodovědecké fakultě Jihočeské univerzity.

Obrázek ke článku Studium MBA zvýší manažerům v IT hodnotu na trhu práce

Studium MBA zvýší manažerům v IT hodnotu na trhu práce

Investice do kvalitního vzdělání se vyplatí, a to jak v osobní, tak v profesionální rovině. Prestižní titul MBA otevře absolventům vysokoškolského studia cestu k mnoha atraktivním pracovním pozicím a potažmo i vyšším příjmům. Zvlášť, pokud dovedou nastudovanou teorii převést přímo do praxe a využít ji při komunikaci i řešení problémů.

Obrázek ke článku Co nám přinese technologický rok 2019? Podle Cisco bude směr určovat těchto 6 trendů

Co nám přinese technologický rok 2019? Podle Cisco bude směr určovat těchto 6 trendů

Kam se bude ubírat technologický vývoj? Společnost Cisco představila 6 trendů, které budou v příštím roce měnit svět a podobu moderních firem. Ty se v roce 2018 podle očekávání zaměřily na lepší využití dat, kterých dnes shromažďují velké objemy. Pro mnohé byla prioritou optimalizace a správa multicloudových prostředí, stejně jako snaha integrovat zabezpečení již na základní úrovni infrastruktury. Žádný z těchto trendů v příštím roce nejspíš nepomine. Přibudou ale další.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý