Mobile
Mobiles provide different features to laptops
User expect different facilities – “location aware”
But also expects a different sort of interaction.
For instance screen taps and swipes.
Part of java script
There are frameworks to help you solve this
problem.
jQueryMobile – very popular – leverage existing
experience on jQuery
w3Schools has a course
1
I will provide an overview of what is available
09jQueryMobile
jQueryMobile
jQuery Mobile is a touch-optimized web
framework for creating mobile web applications.
Minified
jQueryMobile
stylesheet
iOS – Android – Blackberry – windows phone
Palm web OS – symbian
<<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
Minified
jQueryMobile
Minified jQuery
Or download it and host it on your web site
2
09jQueryMobile
jQueryMobile
Label the <div>s with different “data-role”s
This is a custom attribute
an attribute is just
property of a page
html5 has the ability to add – custom
attributes.
It is extensible – a browser which doesn’t
recognise the attribute merely ignores it.
In this case the “data-role” – tells the browser
something about what the div is doing on the
page.
data-role="page”
<div data-role=“page”>
Everything in here is
a single page
</div>
3
09jQueryMobile
data-role
data-role = “header” - creates a tool bar
data-role=“main” –
this defines the main content of the page
data-role = “footer”
Outline of a mobile page
4
09jQueryMobile
transitions
<a href=“#link” data-transition=“ “>text</a>
This is where we get the ability to produce
transitions which are “phone-like”
Try these using
Chrome.
Gives better response
than firefox
flip, flow, pop, slide, slidedown, slidefade,
slideup, turn, none
Can modify the actions of these transitions
using the data-direction=“reverse”
So you can flick the screen left to go forward
and right to go back
5
09jQueryMobile
buttons
<button data-role=“button">Button</button>
Data-role – triggers the appropriate behaviour
But it also provides button icons – each with a
different name
6
09jQueryMobile
Button icons
Here is the full set from the jQueryMobile web
site
Can indicate where
on the button: top,
bottom, left, right …
the icon should go.
http://demos.jquery
mobile.com/1.1.2/d
ocs/buttons/button
s-types.html
href="#anchor” data-icon=“arrow-l”
7
09jQueryMobile
inputs
Input fields are much as for desktop html but
there is
A data-role=“controlgroup” attribute – which
helps putting grouping items
data-role=“flipswitch”
Flipswitch
Interesting web site with CSS techniques
http://www.impressivewebs.com/simple-toolsfront-end-developers/
8
09jQueryMobile
navbar
data-role=“navbar”
provides the “standard” mobile layout
<div data-role="page" id="pageA">
<div data-role="header">
<h1>Poetry Page</h1>
<div data-role="navbar">
<ul>
<li><a href="#pageA">Home</a></li>
<li><a href="#pageB">Metaphysical</a></li>
<li><a href="#pageC">Romantic</a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<p>The poetry web site. Providing answers of English Poetry
throughout the ages</p>
</div>
9
09jQueryMobile
panels
A data-role=“panel” attribute
SIDEBAR
Content
SIDEBAR
Standard desktop layout
SIDEBAR
Content
SIDEBAR
Equivalent effect for phones
10
09jQueryMobile
collapsables
A data-role=“collapsable” attribute
+ Romantic Poets
+ Sturm und Drang
-
Romantic Poets
+ Blake
+ Byron
+ Keats
+ Shelley
+ Wordsworth
Collapsables can be
embedded
-
11
Romantic Poets
+ Blake
+ Byron
- Keats
Born: 31 October 1795
Place: Moorgate, London
Died: 23 February 1821
+ Shelley
+ Wordsworth
09jQueryMobile
tables
A data-role=“table” attribute
useful for displaying database content
lists
Another way of collecting information – if the
list is arranged alphabetically – the letters
12
09jQueryMobile
themes
jQueryMobile allows to create a unified look
and feel by using themes. Here are the
standard ones
13
09jQueryMobile
Cutom themes
14
09jQueryMobile
Touch events
jQueryMobile – adds to the javascript
framework of jQuery to allow you to react to
mobile events
$(‘#name’).on(“swipe”, function() {
do stuff
}
tapping on something with
the id #name
anonymous function
more compact notation easier to read. Function only relates
to this single action – tie it in closely.
would not use if you wanted to call the function in more than
one place.
other actions
On(“swipeleft”,
On(“swiperight”,
On(“tap”,
On(“taphold”,
15
09jQueryMobile
Touch events (ii)
Can pick up scolling
$(document).on(“scrollstart”, function() {
}
Scrolling is on a document
not a page item or class
And of course “scrollstop”
Can pick up changes in the screen orientation.
This event is associated with the window node
$(window).on(“scrollstart”, function() {
if(window.orientation == 0)
}
// Portrait
Variable for window orientation
https://api.jquerymobile.com/category/events
For a comprehensive list
16
09jQueryMobile
Multi-pages
Talked about minimising the number of
separate downloads you need in order to reduce
the time and bandwidth needed to access the
information on a website.
This comes for free with jQueryMobile
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
Minified jQuery
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div>
Another thing to bear in mind is if two pages
use the same CSS – if the CSS is with the page
it is downloaded twice.
17
If it is in a css file, that file can be cached,
making the second page faster.
09jQueryMobile
Mobile
That is the end of the formal lectures for the
course.
There is a jQuerymobile workshop tomorrow.
The last formal workshop.
Doesn’t mean I
won’t be available
at other time
I will be available in my office for the rest of the
term during the lecture hour and the workshop
two hours – specifically to answer questions
I will give a revision lecture in week 11 of the
term 17th March.
The revision lecture will concentrate on the
concepts of the course. In other words the
things that can be examined!
If there are any things you want covered let me
know before the lecture.
18
09jQueryMobile
Assignment
Will answer questions of the form …
am I including the right things?
have I left anything out?
I will need time to look at stuff
questions asked just before the
deadline may not get answered
Will not solve technical problems about the
assignment – but I will point you at
possible solutions.
You have my email address and office
number.
If you come to my office unannounced I
will answer questions – if I am not busy.
19
BUT – I may not be there
OR – I may be dealing with other
students
09jQueryMobile