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/

Real World jQM

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

Gallery: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" />

Copied From 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="content">...</div> ! <div data-role="footer">...</div> </div>

Hello jQMDemo

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

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

refresh

forward

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”

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/

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

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/

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

<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 2

username (text) gender (m/f)

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

phone number comments (text area)

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’;});

jQM Eventstap

taphold

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

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

Thank You

Ynon Perek

ynonperek@yahoo.com

ynonperek.com

04 jQuery Mobile

Technology

jQuery Mobile

jQuery, jQuery UI, and jQuery Mobile: Recipes -

10. jQuery Mobile - What is jQuery Mobile? How to use it?

jQuery Mobile Introduction

jQuery & jQuery Mobile

jQuery, jQuery UI et jQuery Mobileromagny13.com/.../04/jQuery-jQuery-UI-et-jQuery-Mobile.pdf3 3 4. PAGE EVENTS AND ORIENTATIONS..... 61 Pour utiliser jQuery/jQuery UI/JQuery Mobile

Toutch Jquery Mobile

jQuery, jQuery UI et jQuery Mobileromagny13.com/wp-content/uploads/2015/04/jQuery-jQuery...Pour utiliser jQuery/jQuery UI/JQuery Mobile : Télécharger les sources sur le site ou packages

jQuery Mobile UI

Mobile Crossplattform- Web-Applikationen mit jQuery Mobile · mobile JQUERY MOBILE 1.0 ALPHA 4.1 RELEASED! jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets A

JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Apex & jQuery Mobile

jQuery, jQuery UI, and jQuery Mobile: Recipes and Examplesptgmedia.pearsoncmg.com/images/9780321822086/samplepages/... · Praise for jQuery, jQuery UI, and jQuery Mobile “de Jonge

jQuery Mobile Workshop

jQuery Mobile Apps

Mobile web with jQuery Mobile

Manual Jquery Mobile

Creating Mobile Applications with jQuery Mobile … · Creating Mobile Applications with jQuery Mobile and PhoneGap Build 3 ... Creating Mobile Applications with jQuery Mobile and

363n a jQuery Mobile) · ofrece jQuery Mobile Introducción a jQuery Mobile Haciendo uso de jQuery Mobile, uno de los frameworks más prácticos y sencillos para el desarrollo de

Mobile Apps with jQuery Mobile - sigs.de€¦ · Mobile Apps with jQuery Mobile Kai Tödter Siemens Building Technologies