När ska man använda
jQuery Mobile?

Av Mattias Kihlström

www.mogul.com

Fråga:

När ska man använda jQuery Mobile?

Svar:

Använd jQuery Mobile när du snabbt vill skapa en fingervänlig och appliknande webbsajt för smarta telefoner med bra internetuppkoppling

Vad är jQuery Mobile?

JavaScriptramverk för att skapa fingeroptimerat GUI för mobila enheter

Byggt ovanpå jQuery
(1.7.0 - 1.8.2)

(jQuery är ett JavaScriptramverk som bland annat ger ett enhetligt sätt att hantera DOM:en i olika webbläsare.)

Senaste stabila versionen är 1.2
(släpptes för ett par veckor sedan)

Öppen källkod
(MIT och GPL 2)

HTML 5 och CSS 3

Bilder för ikoner där det behövs
(en sprite för respektive färg)

AJAX-navigering

Finns flera färdiga teman och man kan bygga sitt eget antingen för hand eller med webbappen ThemeRoller

Klass A-stöd i många olika webbläsare

• Apple iOS 3.2*-6.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1 / 6.0), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1 / 6.0)
• Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
• Android 3.2 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
• Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
• Android 4.1 (Jelly Bean)  – Tested on a Galaxy Nexus and Galaxy 7
• Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
• Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
• Blackberry 7 – Tested on BlackBerry® Torch 9810
• Blackberry Playbook (1.0-2.0) – Tested on PlayBook
• Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
• Palm WebOS 3.0 – Tested on HP TouchPad
• Firefox Mobile 15 – Tested on Android 2.3 and 4.1 devices
• Chrome for Android 18 – Tested on Android 4.0 and 4.1 devices
• Skyfire 4.1 - Tested on Android 2.3 device
• Opera Mobile 11.5-12: Tested on Android 2.3
• Meego 1.2 – Tested on Nokia 950 and N9
• Tizen (pre-release) – Tested on early hardware
• Samsung Bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
• UC Browser – Tested on Android 2.3 device
• Kindle 3 and Fire - Tested on the built-in WebKit browser for each
• Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
• Chrome Desktop 11-21 - Tested on OS X 10.7 and Windows 7
• Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
• Firefox Desktop 4-15 – Tested on OS X 10.7 and Windows 7
• Internet Explorer 7-10 – Tested on Windows XP, Vista and 7
• Opera Desktop 10-12 - Tested on OS X 10.7 and Windows 7

Hur fungerar jQuery Mobile?

Ange om ett visst element är exempelvis en sida, en menyrad eller en knapp genom att sätta ett dataattribut som kallas role.

Endast en data-role="page" visas åt gången, men man kan ha flera jQuery Mobile-sidor på en HTML-sida.

Kodexempel:

    <div id="page1" data-role="page" data-theme="b">
       <div data-role="header">
          <h1>Page 1</h1>
       </div>
       <div data-role="content">
          Lorem ipsum...
          <a href="#page2"
             data-role="button" data-icon="star"
             data-iconpos="right" data-transition="flip">
             View second page
          </a>
       </div>
    </div>

jQuery Mobile...

... lägger till extra HTML-element

... lägger till klasser

... sätter upp egna händelser (events)

... och så här ser det ut efter att jQuery Mobile gjort sitt:

	<div id="page1" class="ui-page ui-body-b ui-page-active" data-url="page1" data-role="page" data-theme="b">
	  <div role="banner" class="ui-header ui-bar-a" data-role="header">
	    <h1 aria-level="1" role="heading" class="ui-title">Page 1</h1>
	  </div>
	  <div role="main" class="ui-content" data-role="content">
	    Lorem ipsum...
	    <a href="#page2" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-btn-up-b" data-theme="b"
	      data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"
	      data-role="button" data-icon="star" data-iconpos="right" data-transition="flip">
	      <span class="ui-btn-inner ui-btn-corner-all">
	        <span class="ui-btn-text">
	          View second page
	        </span>
	        <span class="ui-icon ui-icon-star ui-icon-shadow">&nbsp;</span>
	      </span>
	    </a>
	  </div>
	</div>

Undvik...

... om bandbredd kan vara ett problem

(Men man kan sätta ihop sin egen version med bara det innehåll man behöver för att minska filstorleken.)

... om upplevelsen ska vara optimal för mobiler av äldre modell

... om designen skiljer sig väsentligt från vad man får på köpet

... om du vill ha fräcka animationer i Android tidigare än version 4

Men...

jQuery Mobile är riktigt trevligt...

... om främsta målgruppen kör iOS 5, iOS 6 eller Android 4

... om användarna har 3G-uppkoppling eller bättre

... om du har ont om tid

... om du tycker om när
"det bara fungerar"

Ett exempel från verkligheten

m.stenaline.se

När ska man använda
jQuery Mobile?

Använd jQuery Mobile när du snabbt vill skapa en fingervänlig och appliknande webbsajt för smarta telefoner med bra internetuppkoppling

Tack!

@kihlstrom

mattias.kihlstrom@mogul.com