CNIT 132 Intermediate HTML and
CSS
jQuery Mobile
Agenda
• My Web Site: http://fog.ccsf.edu/~hyip
(download syllabus, class notes).
• Murach’s HTML5 and CSS3, by Zak Ruvalcaba
& Anne Boehm, Mike Murach & Associates,
ISBN 978-1-890774-66-0. (Chapter 15)
How to Provide Pages for Mobile
Devices
• There are five ways to provide web pages for
mobile devices.
1. Define a style sheet for mobile devices
• Set the media attribute in the link element to
“handheld”. (However, many mobile browsers do not
recognize this media type.)
• CSS3 provides a new feature called media queries that
gives you more control over this feature.
(http://www.w3.org/TR/css3-mediaqueries/)
2. Include a link to a mobile version of the web site
near the top of the home page
How to Provide Pages for Mobile
Devices (continue…)
3. Use client-side JavaScript to detect mobile
devices and redirect (There are so many
different mobile devices that it is difficult to
detect. Some mobile devices do not support
JavaScript)
4. Use a server-side scripting language to detect
and redirect (There are so many mobile
browsers that it is difficult to detect them all)
5. Use the WURFL on the server to detect mobile
devices (download the XML configuration file
periodically so it is up-to-date)
CSS3 Media Queries
• iPhone’s Safari and other mobile browsers including Opera’s Mobile and
Mini Browsers do support a new feature of CSS3 called media queries.
These queries let you use a conditional expression for a media type.
• The maximum screen width for a mobile device is 480 pixels. You can code
a link element to use a different style sheet:
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)">
• You code another link element for screen media with a minimum screen
width of 481 pixels.
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-device-width: 481px)">
How to set the viewport properties
•
•
•
The viewport on a mobile device determines the content that is displayed on the page.
It can be larger or smaller than the actual visible area of the screen.
Content properties for viewport metadata
 width: The width of the viewport in pixels. You can also use the device-width keyword to
indicate that the viewport should be as wide as the screen.
 height: The height of the viewport specified in pixels. You can also use the device-height
keyword to indicate that the viewport should be as tall as the screen.
 initial-scale: A number that indicates the initial zoom factor that is used to display the
page.
 minimum-scale: A number that indicates the minimum zoom factor for the page.
 maximum-scale: A number that indicates the maximum zoom factor for the page.
 user-scale: Indicates whether the user can zoom in and out of the viewport. Possible
values are yes and no.
<meta name="viewport" content="width=device-width, initial-scale=0.5">
http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/01_viewport.html
An introduction to jQuery Mobile
•
•
•
•
•
jQuery Mobile is a free, open-source, JavaScript library that makes it much easier
to develop web sites for mobile devices. (It is used in combination with the core
jQuery library.)
jQuery Mobile lets you store multiple pages in a single HTML file, create dialog
boxes, buttons, and navigation bars; format your pages without coding your own
CSS; collapsible content blocks, and accordions.
jQuery Mobile is supported by most devices including iPhone iOS, Android,
BlackBerry, Windows Phone, Palm WebOS, and Symbian.
The jQuery Mobile web site features all of the documentation, sample code, and
downloads that you need for beginning your work with mobile devices.
To download jQuery Mobile, go to its web site (www.jquerymobile.com). However,
you won’t need to do that if you include it from a Content Deliver Network.
How to include jQuery Mobile in
your web pages
• The three files that you need to include for
jQuery applications.
The jQuery Mobile CSS style sheet
The jQuery JavaScript file (Core jQuery).
The jQuery Mobile JavaScript file.
• Two ways to include the jQuery files
Include the files from a Content Delivery Network
(CDN) like Microsoft or jQuery.
Download and deploy the files on your web
server. Then, include them from the server.
How to include the jQuery Mobile files
from a Content Delivery Network
• NOTE: you must code the script element for jQuery Mobile
after the one for jQuery. That is because jQuery Mobile uses
functions that are in the jQuery file.
<!-- use the latest version of jQuery mobile and jQuery Core -->
<!-- 01 jQuery mobile css -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile1.2.0.min.css">
<!-- 02 jQuery core vsn 1.6.3, 1.6.4, 1.7, 1.7.1 are ok. Vsn 1.7.2, 1.8.0, latest are not ok->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 03 jQuery mobile js -->
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile1.2.0.min.js"></script>
How to create one web page with
jQuery Mobile
• The HTML for a typical web page that uses jQuery Mobile wil contain div,
header, section, and footer elements.
• The data-role attribute is used to identify the different parts of a mobile
web page. To identify the four major parts of a mobile web page, set the
values of this attribute to “page”, “header”, “content”, and “footer”.
• In the header, the content should be coded within an h1 element. In the
footer, the content should be coded within an h4 element.
• In the section with “content” as its data-role attribute, you can code
whatever elements you need.
• The style sheet for jQuery Mobile formats the web page based on the
values in the data-role attributes.
• http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/02_one_web
_page.html
How to use jQuery Mobile to
create a mobile web site
• When you use jQuery Mobile, you don’t have to
develop a separate HTML file for each page. Instead,
within the body element of a single HTML file, you
code one div element for each page with its data-role
attribute set to “page”.
• For each div element, you set the id attribute to a
placeholder value that can be accessed by the href
attributes in the <a> elements of other pages.
• http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_s
amples/03_mobile_web_site.html
How to use dialog boxes and
transitions
•
•
•
•
•
The transitions that can be used
 slide: The next page slides in from the right to left.
 slideup: The next page slides in from bottom to top.
 slidedown: The next page slides in from top to bottom.
 pop: The next page fades in from the middle of the screen.
 fade: The next page fades into view.
 flip: The next page flips from back to front similar to a playing card being flipped over.
This transition is not supported on some devices.
The HTML for a dialog box is coded the way any page is coded. However, the <a> element
that links to the page includes the data-rel attribute with “dialog” as its value.
To specify the way a page or a dialog box is opened, you can use the data-transition attribute
from above. If a device does not support the transition that you specify, the attribute is
ignored.
The styling for a dialog box is done by the jQuery Mobile CSS file.
http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/04_dialog_transition.html
How to create buttons
• The icons that are provided by jQuery Mobile
delete
arrow-larrow-r
arrow-u
arrow-d
search plus
minus
check
gear
refresh forward
back
grid
star
alert
info
home
• To add a button to a web page, you code an <a> element with
its data-role attribute set to “button”.
• http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/
05_button.html
How to create a navigation bar
• Code a div element within the header element. Then, set the data-role
attribute for the div element to “navbar”.
• Within the div element, code a ul element that contains one li element for
each link.
• Within each li element, code an <a> element with an href attribute that
uses a placeholder for the page that the link should go to. Then, set the
data-icon attribute to the icon of your choosing.
• For the active item in the navigation bar, set the class attribute to “ui-btnactive”. Then, the color of this item will be lighter than the other items in
the navigation bar.
• http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/06_navigatio
n_bar.html
How to apply themes to HTML
elements
• The five jQuery Mobile themes
 a: Black background with white foreground. This is the default.
 b: Blue background with white foreground.
 c: Light gray background with a black foreground. Text will appear in
bold.
 d: Dark gray background with black foreground. Text will not appear in
bold.
 e: Orange background with black foreground. Use for accents, and use
sparingly.
• By using the five themes that are included with jQuery Mobile, you can
make appropriate adjustments to the default styles for the HTML
elements.
• http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/07_theme.ht
ml
How to create collapsible content
blocks
• Code a div element for each content block with the data-role attribute set
to “collapsible”.
• By default, each content block will be collapsed when the page is
displayed. To expand a content block, add the data-collapsed attribute
with its value set to “false”.
• Within each div element, you can code the HTML for whatever content
you want.
• Description:
 More than one content block can be expanded at the same time.
 jQuery Mobile automatically adds the plus and minus icons for the
content blocks.
• http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/08_collapsibl
e_block.html
How to create an accordion
• Code a section (or div) element for the accordion within the
section for the page and set its data-role attribute to
“collapsible-set”.
• Code the content blocks the same way you code collapsible
content blocks.
• Description:
 In contrast to collapsible content blocks, only one block in
an accordion can be expanded at the same time.
 jQuery Mobile automatically adds the plus and minus icons
for the content blocks.
• http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/
09_accordion.html