Vad är JQuery Mobile

Jquery Mobile är inte en anpassning av Jquery för handhållna enheter

Vad är JQuery Mobile

Programmeringsspråk

C#

Java

Javascript

Vad är JQuery Mobile

Programmeringsspråk Domänramverk

C# Asp.net

Java JEE

Javascript Jquery

Vad är JQuery Mobile

Programmeringsspråk Domänramverk Webbapp ramverk

C# Asp.net Web Forms

Java JEE JavaServer Faces

Javascript Jquery Jquery Mobile

I korta drag

• Mobilt ramverk som bygger på JQuery• Cross browser/cross platform• Webbappar med ”native” känsla• Markup-baserad. Ingen javascript-kod för att komma igång• Progressive enhancement, graceful degradation

Markup baserat?

C# Java JQuery Mobile

<form runat="server"> <h:form> <div data-role="page">

Markup baserat?

C# Java JQuery Mobile

<form runat="server"> <h:form> <div data-role="page"><asp:Repeater runat="server" ID="MinLista"> <HeaderTemplate> <ul></HeaderTemplate> <ItemTemplate> <li> <%= Eval("Titel") %> </li></ItemTemplate> <FooterTemplate> </ul></FooterTemplate> </asp:Repeater>

<ui:repeat value="#{model}" var="listItem"> <div>      <h:outputText value="#{listItem}"/> </div></ui:repeat>

<ul data-role="listview“data-inset="true“data-theme="a">  <li>Alt. 1</li>  <li>Alt. 2</li>  <li>Alt. 3</li></ul>

En enkel sida

Resultat

Formulärelement

<input type="text" name="textbox" id="textbox" value="" />

<input type="search" name="search" id="search" value=""/>

<input type="range" name="range" value="0" min="0" max="10" />

<select name="slider" id="slider" data-role="slider“><option value="0">Off</option><option value="1">On</option></select>

<fieldset data-role="controlgroup"><legend>Checklist:</legend><input type="checkbox" name="checkbox1" id="checkbox1" /><label for="checkbox1">HTML</label><input type="checkbox" name="checkbox2" id="checkbox2" /><label for="checkbox2">CSS</label></fieldset>

Teman

<fieldset class="ui-grid-a"> <div class="ui-block-a"> <button type="submit" data-theme="c">Cancel</button> </div> <div class="ui-block-b"> <button type="submit" data-theme="b">Submit</button> </div></fieldset>

Länkar laddas via AJAX

• Alla sidladdningar inom samma domän laddas via AJAX-anrop

• Förutsatt att nästa sida följer Jquery mobile standard• Och att AJAX stöds• Om misslyckas ges ett fint felmeddelande• Länkar till andra domäner hanteras som en vanlig

sidladdning

• För att göra en riktig GET, sätt rel=“external”

<a href="/index.html" data-icon="grid" class="ui-btn-right" rel="external">Hem</a>

Dialoger

<a href="#pop.html" data-rel="dialog">Pop up!</a>

Utökning av JQuerys API

• Event• Metoder

API – Events (urval)

• Touch• Tap• Taphold• Swipe• swipeleft/right

• Scroll• start/stop

• Orientation• orientationChange

• Page init• pageInit() > $(document).ready()• Pagecreate/pagebeforecreate

• Page load• Pageload/Pagebeforeload• Pageloadfail

• Pagechange• Pagechange/pageBeforeChange• pageChangeFail

• Page Transition• pageBeforeShow/hide• pageShow/hide

API – Metoder (urval)

$.mobile.ajaxLinksEnabled = false;$.mobile.silentScroll();$.mobile.activePage;

$.mobile.changePage();$.mobile.loadPage();

jqmData(), jqmRemoveData() > data(), removeData()

Bra att använda - Media queries

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' /> <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Framtiden