67-317: JQuery Mobile Lab – Part 1
advertisement
67-317: JQuery Mobile Lab – Part 1
Exercise 1: Warmup (Create a jquery mobile website up and running quickly)
1. Download the Exercise1.zip file and unzip to a folder exercise1 on your machine.
2. Download JQueryMobile files from http://jquerymobile.com/download/ and save the css, js,
and image files to the appropriate folder on your exercise1 folder
3. Insert the following references to the <head> part of the Exercise1.html file
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
<!-- add your custom css file here -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<!-- add your custom script file here -->
4. Create a simple blank landing page within the body
<div data-role="page" id="page" >
<div data-role="header" >
<h1>Home Page</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer" >
<h4>About Me</h4>
</div>
</div>
View the resulting page on Firefox (and Adobe Dreamweaver)
Now set a different theme for the header and footer
<div data-role="header" data-theme="b">
<div data-role="footer" data-theme="b">
Step 1: Preview the page in Firefox and show the result here:
5. Change the header
a. Add a new css file mobile.css under a folder called css (blank file exists already)
b. Add an image panorama.jpg under a new folder called images (this is already done for
you)
c. Now insert these styles for the banner image and header into the mobile.css file
#banner {
border-width:1px;border-color:transparent;border-style:solid;
background-image:url('../images/panorama.jpg');
background-repeat:no-repeat; height:75px;
background-size: 375px 75px;
background-position:center;
}
#banner h1 {
text-align:center;font:12px;color:White; }
d. Add a reference to the css file
<link rel="stylesheet" href="css/mobile.css" />
e. Add the content within the header div of the html file (Replace <h1>Home Page</h1>)
<div id="banner">
<h1>Mystic Traveler</h1>
</div>
6. Add a simple menu (Replacing the current one)
<ul data-role="listview" data-inset="true" >
<li class="topline"><a href="#">About Me</a></li>
<li><a href="#">Narratives</a></li>
<li><a href="#">Journals</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
Step 2: Preview the page in Firefox and show the result here:
7. Fix the footer: (Keeps the footer always on the bottom of the page)
<div data-role="footer" data-position="fixed">
<h4>About Me</h4>
</div>
Change the theme of the footer with data-theme="b"
Now let us create another page- an image gallery
8. Add a slider to the Photo Gallery page
a. Add following styles to mobile.css
/* Photo gallery page */
img { display:none; width:100%; }
#first {display:block;}
b. Add images 1.jpg 2.jpg 3.jpg to the images folder (This is already done for you)
c. Add the following to the page content for the gallery page
<div data-role="page" id="gallery" data-title="Gallery">
<div data-role="header">
<h1>Picture gallery</h1>
</div>
<div data-role="content"> <!-- insert our slider page here -->
<div id="slider">
<img id="first" src="images/1.jpg" alt="1" />
<img src="images/2.jpg" alt="2"/>
<img src="images/3.jpg" alt="3"/>
<button onclick="displayImage();">Press Me</button>
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
d. Add javascript in a file called mobile.js and include in the js folder
var i = 1;
var noOfImages = 3;
var imgs = document.getElementsByTagName("img");
function displayImage() {
if (i == 0) { prev = noOfImages-1; } else {prev=i-1;}
imgs[i].style.setProperty("display", "block", null);
imgs[prev].style.setProperty("display", "none", null);
if (i == (noOfImages - 1)) i = 0; else i++;
}
9. Add this link to the script
<script src="js/mobile.js" type="text/javascript"></script>
10. Link the gallery page to the menu on the home page
<li><a href="#gallery">Photo Gallery</a></li>
11. Now reload the page and click on the Photo Gallery Menu and see the new page
Step 3: Preview the page in Firefox and show the result here:
12. Insert a new dialog page as follows:
a. Replace the link for the Contact page as follows (don’t delete the <li> tag)
<li>
<a href="#contact" data-rel="dialog" data-transition="slidedown">Contact</a>
</li>
b. Insert the following for a fifth page
<div data-role="dialog" id="contact" >
<div data-role="header"><h1>Contact me</h1></div>
<div data-role="content" data-theme="c">
<section id="contact">
<form id="contactform" action="#">
<fieldset> <label for="name">Your Name</label>
<input name="name" id="name" type="text" required />
<label for="emailid">Your Email id</label>
<input name="emailid" id="emailid" type="email" required /> </fieldset>
<input value="Submit" class="submit" type="submit" />
</form>
</section>
</div>
</div>
Step 4: Preview the page in Firefox and show the result here:
13. Add a full screen page
First link page 1 to the menu
<li class="topline"><a href="#about">About Me</a></li>
Now include the following page information
<div data-role="page" id="about" >
<div data-role="header" data-fullscreen="true" data-position="fixed">
<h1>About the mystic traveler </h1>
</div>
<div data-role="content">
<section id="description">
A subtle blend of white peach and organic vanilla
<br /><br /><br /> "One’s destination is never a place, but a new way of seeing things." - Henry
Miller
</section>
</div>
<div data-role="footer" data-fullscreen="true" data-position="fixed" >
<h4>@mystictraveler</h4>
</div>
</div>
Add the following styles to the mobile.css file
/* About Me page */
#description {
color: #CCCCCC;
font-size: 1.5em;
text-align: left;
margin: 20px auto 10px 15%;
padding: 10px 10px;
border:1px solid White;
margin: 20px auto 10px 5%;
}
.ui-header .ui-title, .ui-footer .ui-title {
margin-right: 0 !important; margin-left: 0 !important;
}
14. Deploy this mobile site on your Andrew Account and view on a mobile device. You will see that
the page is automatically scaled to fit a 960px viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Now set the viewport metatag, upload and view again.
This completes Exercise 1. Now create a landing page for your project using the JQuery Mobile
Framework. In the next lab we'll review more widgets and features of JQuery Mobile.
