1. jQuery Mobile
Hour 5
Building Your First Mobile Site
about.me/babon
2. What You'll Learn in Hour 5
+ The basic structure of a page
+ How to add a header and a footer bar to your
page
+ How to add some simple formatting to your
layout
+ How to attach an image and make it scale
+ How to use a button to link to another page
about.me/babon
4. Adding a Header and Footer
Add to mobile_template.html
● header
● content
● footer
Hints: data-role="page"
data-role="header"
data-role="content"
data-role="footer"
about.me/babon
5. Formatting Text Content
Header section should contain your H1 tag.
Footer section typically contains H3 tag.
Add some p tags to the content.
about.me/babon
6. Adding an Image
Add a largish image to the content area
Add style to the head to make image "stretchy"
<style type=text/css>
img {
max-width: 100%;
}
</style>
about.me/babon
7. Linking to a Second Page
Create a second page.
Hints: data-role="page" id="pageone"
data-role="page" id="pagetwo"
about.me/babon
8. Linking to a Second Page
Create text links to navigate between pages.
Hints: data-role="button" href="#pagetwo"
data-role="button" href="#pageone"
Gene's busted example.
about.me/babon
9. Giulia's Example
Look for the giulia folder on the temp server
jquery_mobile > giulia
Tutorials reviewed
jQuery Mobile for Absolute Beginners
Parts 1, 2, 3, 4
Creating a Website Using jQuery Mobile
Part 1
about.me/babon
10. Possible Deliverable
Using Giulia's site as an example build a site
that features classmates' LinkedIn info.
Use tutorials from jQuery jAM and
documentation from jQueryMobile for
assistance.
Other possibilities ...
about.me/babon
