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

 

jQuery Mobile: udělejte si mobilní verzi

Google       Google       21. 11. 2011       14 940×

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 Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý