04 jQuery Mobile

jQuery MobileDesign “native” mobile apps

Wednesday, October 31, 12

jQuery Mobile

A Mobile UI framework

Implements native looking UI components


Real World jQM

http://c.dric.be/ http://m.anticocasalediscansano.it/en/


http://c.dric.be/#Home


http://m.anticocasalediscansano.it/en/


Real World jQM

http://c.dric.be/ http://m.anticocasalediscansano.it/en/

Gallery:http://www.jqmgallery.com/






http://www.jqmgallery.com/
















jQuery Mobile Dark Side

Needs jQuery

jQM way or the highway

Performance


jQM When

Use for Mobile Subdomain

Use for landing pages

Use for small static mobile web site


jQuery Mobile Bright Side

Page layout

UI Controls

jQM API

Theming


Page Layout


Using jQM<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

Copied From http://jquerymobile.com/download/


http://jquerymobile.com/download/

http://jquerymobile.com/download/

Page Layout

a page is just a div with data-role=”page”

a jQM page has:

header

content

footer


Page Example

<div data-role="page"> <div data-role="header">...</div>

! <div data-role="content">...</div> ! <div data-role="footer">...</div> </div>


Hello jQMDemo


http://ynonperek.com/courses/mobileweb/jqm-examples.html

http://ynonperek.com/courses/mobileweb/jqm-examples.html

Multi Page Layout

Multiple pages can be specified in the same .html file

Each page is identified with an id attribute

Navigation is performed using a tags

Back button is generated for pages that have data-add-back-btn=”true”


Using transitions

Transitions are determined via the data-transition attribute

<p><a href="#about" data-transition="slideup">About this app</a></p>


Page TransitionsEffect Name Description

slide slide right-to-left. This is the default

slideup slide from bottom-to-top

slidedown slide from top-to-bottom

pop expand the new page (dialog pop-up style)

fade fade the new page in

flip flip pages (like cards).


Exercise

Write a mobile website with four pages.

First page: text and link.

Second page: back button and an image.

Third and fourth pages: simple texts

Create transition effects using: slide, pop, fade, flip


jQuery Mobile

Page layout

UI Controls

jQM API

Theming


jQM UI ControlsjQM provides ready-made UI controls for our app that “look” native.

This rich library includes:

Toolbars

Buttons

Forms & Lists


Toolbars

A header with data-position=”fixed”

Implements fixed position using JavaScript


Toolbars

We can add buttons to toolbars simply by writing them in the bar

header bar can have 2 buttons

Use inside header:<a href=”#” data-role=”button”>Add</a>


Toolbars

Careful not to put too many buttons - looks bad


Toolbars

Footer can have as many buttons as you wish

Add class=”ui-bar” to get padding

Demo


Toolbars

Again, don’t put too many buttons or it’ll look bad


Toolbar Exercise

Implement a mockup for a mail reader application

Top toolbar button: Logout

bottom toolbar buttons: Compose, delete, forward, reply.


Buttons

An anchor tag with data-role=”button” will look like a button

Any normal form button will automatically be converted


Button Icons

data-icon attribute allows using icons on a button


Button Iconsarrow-l

arrow-r

arrow-u

arrow-d

delete

plus

minus

check

gear

refresh

forward

back

grid

star

alert

info

home

search


Icon Positions

data-iconpos determines the icon position

possible values: right, top, bottom, notext


Inline Buttons

Dialog buttons are usually placed side-by-side

This is called inline, and achieved viadata-inline=”true”


Buttons DemoWednesday, October 31, 12

Button Exercise

Implement a jQM app with three buttons titled: red, blue and green

App background color should change when a user presses a button

Bonus: use gradients as background


Basic List<ul data-role="listview" data-theme="g">

! <li><a href="acura.html">Acura</a></li>! <li><a href="audi.html">Audi</a></li>! <li><a href="bmw.html">BMW</a></li> </ul>


Numbered List

<ol data-role="listview" data-theme="g">! <li><a href="acura.html">Acura</a></li>! <li><a href="audi.html">Audi</a></li>! <li><a href="bmw.html">BMW</a></li></ol>


Count Bubble List

Wrap the number in an element with ui-li-count to get the “count bubble”<li> <a href=”#”>Inbox <span class=”ui-li-count”>12</span> </a></li>


Thumbnail Lists

Insert an img tag as the first child in the anchor to get a thumbnail

Image is automatically scaled by jQM


Split List

Having two links in the same item creates a split list


Inset Lists

A list that is embedded in a page is called inset

use data-inset=”true” to get the effect


Exercise

Implement the following home screen


Navigation Bars

Navigation elements at the top or bottom of the page

Sometimes referred as “tab bars”

<div data-role="footer">! <div data-role="navbar">! ! <ul>! ! ! <li><a href="#" class="ui-btn-active">One</a></li>! ! ! <li><a href="#">Two</a> </li>! ! </ul>! </div></div>


Top Nav Bar

Put the above code in the header to get top nav bars

They are recommended for mobile apps running inside the browser


Bottom Nav Bar

Put the above code in the footer to get bottom nav bar

Recommended in standalone apps


Tab Bars (ala iPhone)

Use data-icon to get icons in the nav bars above the text

Custom icons are also allowed

Free iOS Style Icons:http://glyphish.com/


http://glyphish.com/

http://glyphish.com/

Icon Gridsdivs can be lines up in columns (or grid)

<div class=”ui-grid-b”> <div class=”ui-block-a”> </div> <div class=”ui-block-b”> </div> <div class=”ui-block-c”> </div></div>


Exercise

Implement the following

App is 2 tabs: Home and Image Gallery

Home includes text info on eating vegetables

Gallery has photos of vegetables (use google images)Solution at: http://apps.ynonperek.com/mobileweb/jqm/vegapp/


http://apps.ynonperek.com/mobileweb/jqm/vegapp/

http://apps.ynonperek.com/mobileweb/jqm/vegapp/

FormsMobile optimized controls


Mobile Optimized Forms

jQuery mobile provides a complete set of finger friendly form elements

Most form elements are automatically initialized by jQM

Prevent auto initialization with data-role=”none”


jQuery vs. Normal

Wrap a labe/input pair in a divwith data-role=”fieldcontain”to get the cool thin line


Refresh

Form controls can be set programmatically

Must call “refresh” to refresh the ui

Use $(‘#fld-radio’).checkboxradio(“refresh”);


Form Elements

Text Inputs

Sliders

Buttons

Select Menu

Submitting Forms


Text InputsAvailable input types: text, password, number, email, url, tel, search

textarea provides multi-line text

triggers ‘create’ event on creation


Slider

input type=”range” creates a slider

attributes: value, min, max

refresh with .slider(‘refresh’);


Buttons - Flip Switch

<div data-role="fieldcontain">! <label for="slider">Select slider:</label>! <select name="slider" id="slider" data-role="slider">! ! <option value="off">Off</option>! ! <option value="on">On</option>! </select> </div>


Buttons - Radio<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> ! <legend>Choose a pet:</legend> ! <input type="radio" id="radio-choice-1" value="choice-1" name=”pet” checked="checked" /> ! <label for="radio-choice-1">Cat</label>

! <input type="radio" id="radio-choice-2" value="choice-2" name=”pet” /> ! <label for="radio-choice-2">Dog</label>

! <input type="radio" id="radio-choice-3" value="choice-3" name=”pet” /> ! <label for="radio-choice-3">Hamster</label>

! <input type="radio" id="radio-choice-4" value="choice-4" name=”pet” /> ! <label for="radio-choice-4">Lizard</label> </fieldset></div>


Buttons - Radio

Add data-type=”horizontal” to fieldset to get the horizontal radio buttons

Refresh with .checkboxradio(‘refresh’);


CheckBoxes


CheckBoxes

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose as many snacks as you like</legend>

<input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1">Cheetos</label>

<input type="checkbox" name="checkbox-2" id="checkbox-2" /> <label for="checkbox-2">Doritos</label>

<input type="checkbox" name="checkbox-3" id="checkbox-3" /> <label for="checkbox-3">Fritos</label>

<input type="checkbox" name="checkbox-4" id="checkbox-4" /> <label for="checkbox-4">Sun Chips</label>

</fieldset></div>


CheckBoxes

Use data-role=”horizontal” for horizontal checkboxes

Remember the outer div with data-role=”fieldcontain” so jQM can outline the field

CheckBoxes & Radio Buttons both use a legend for the question text


Submitting Forms

AJAX is used to submit the forms

No Ajax forms are created with data-ajax=false


Q & A - Forms


Forms ExerciseImplement a 2 page registration from using jQM with the following fields:

Page 1 Page 2

username (text) gender (m/f)

password (pass) favorite colors (red, blue or green)can have more than one

phone number comments (text area)

email


jQuery Mobile

Page layout

UI Controls

jQM API

Theming


jQM API

Default configurations

jQM Events

Methods & Utilities


The mobileinit Event

bind to mobileinit event

Note: this event triggers immediately upon loading jqm

$(document).bind("mobileinit", function(){

//apply overrides here});


The mobileinit EventOverriding defaults is simply changing object attributes

Full list of configurable options at: http://jquerymobile.com/demos/1.0b2/docs/api/globalconfig.htmlglobalconfig.html

$(document).bind("mobileinit", function(){

$.mobile.defaultPageTransition = ‘slide’;});


http://jquerymobile.com/demos/1.0b2/docs/api/globalconfig.htmlglobalconfig.html




jQM Eventstap

taphold

swipe

swipeleft

swiperight

orientationchange

scrollstart

scrollstop

pageshow

pagehide

pagecreate

pageinit


jQM Methods

$.mobile.changePage(to, options)

$.mobile.silentScroll

Full list at: http://jquerymobile.com/demos/1.0b2/docs/api/globalconfig.html#/demos/1.0b2/docs/api/methods.html


http://jquerymobile.com/demos/1.0b2/docs/api/globalconfig.html#




Exercise (1)

Implement a jQM app that has two pages

First page keeps a combo box with values: slide, flip; and a “go” button

When a user clicks “go”, app moves to the second page in the selected transition style


Exercise (2)

Modify previously implemented “switching cards” to use swipe gestures


jQuery Mobile

Page layout

UI Controls

jQM API

Theming


jQM Themes

The theme controls how elements look on the page

Each theme has swatches for color play

Default theme has 5 swatches marked a,b,c,d,e


Default Theme


jQM Customize Theme

To customize a theme:

Edit jQM css

Copy a swatch definitions as a new swatch

Change the swatch letter

Make your changes


Q & A


Thank You

Ynon Perek

[email protected]

ynonperek.com


mailto:[email protected]

mailto:[email protected]

http://www.ynonperek.com

http://www.ynonperek.com

Technology

04 jQuery Mobile