I'm gonna teach you to create a Simple and effective jQuery Mobile Website using Dreamweaver.
If you are not aware of what is jQuery Mobile, what are the files necessary to build a jQuery Mobile website. Please feel free to go through my previous tutorial which teaches you 'Simple way to understand jQuery Mobile'.
Step1: Create an empty .HTML page with the help of Dreamweaver. So that you get the Doc type, Meta tag etc needed.
Step2: Include the necessary files like, 2 .JS files and a .CSS file in the <head> section.
If you do not have Dreamweaver, and if you do not have a HTML blank Template. Just copy and paste the following template to your HTML file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First jQuery Mobile Website</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
</head>
<body>
</body>
</html>
Step3: We will need to create 3 pages. Copy and paste the following code between you <body> section.
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page One</h1>
<div align="center"> <a href="#page2" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">About us</a> </div>
</div>
<div data-role="content">
<h4>Welcome to Home Page</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit aliquet arcu </p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!--Page one ends here-->
The above code what you see is a jQuery Mobile Page. Similarly, we have to create 2 more. So that we'll have our 3 Pages what we had planned for.
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header">
<h1>Page One</h1>
<div align="center"> <a href="#page1" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">Home</a> <a href="#page3" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">Contact us</a> </div>
</div>
<div data-role="content">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit aliquet arcu sit amet sodales </p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!--Page two ends here-->
<div data-role="page" id="page3" data-add-back-btn="true">
<div data-role="header">
<h1>Page One</h1>
<div align="center"> <a href="#page1" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">Home</a> <a href="#page2" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">About us</a> </div>
</div>
<div data-role="content">
<h4>Contact Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit aliquet arcu sit amet sodales. </p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!--Page three ends here-->
So just copy and paste all the 3 page one below the other in you HTML Page and you are ready with you jQuery Mobile Website with 3 Pages which are also easily Navigate-able.
OR
Even, you can upload your files to PhoneGap and get the apk so that you can test your Website as an application on your Mobile Device.
PhoneGap supports jQuery Mobile Framework for various Platforms like: iOS, Android, Samsung, Windows Phone etc.
Your final output should be exactly like the below screenshot. Else, you've done some mistake while copying the code.
Here is the full working example for free to to download
So guys, Enjoy using jQuery Mobile Framework.
If you are not aware of what is jQuery Mobile, what are the files necessary to build a jQuery Mobile website. Please feel free to go through my previous tutorial which teaches you 'Simple way to understand jQuery Mobile'.
My previous tutorial teaches you the following:
- Downloading jQuery Mobile Framework from jQuery Mobile Website.
- Copying necessary files out of the jQuery Mobile Framework after extraction.
- Creating new Project folder for your project and getting set with you brand new jQuery Mobile Website.
- Teaches you the different ways in which you can go ahead and create a jQuery Mobile Website. They are like:
- Using the local copies of the files necessary
- Using the CDN hosted files
In this tutorial - I'll be creating a Website that would contain the following:
- Three jQuery Mobile Pages [Home, About, Contact]
- Each page will contain [Header, Content area, Footer]
- You will find Navigation section, that allows you to navigate through the pages
- You will also find [back button] on each of the next and previous pages except the First page.
Here is the Step by Step procedure to Create a jQuery Mobile Website:
Step1: Create an empty .HTML page with the help of Dreamweaver. So that you get the Doc type, Meta tag etc needed.
Step2: Include the necessary files like, 2 .JS files and a .CSS file in the <head> section.
If you do not have Dreamweaver, and if you do not have a HTML blank Template. Just copy and paste the following template to your HTML file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First jQuery Mobile Website</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
</head>
<body>
</body>
</html>
Step3: We will need to create 3 pages. Copy and paste the following code between you <body> section.
<!--Page one starts here-->
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page One</h1>
<div align="center"> <a href="#page2" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">About us</a> </div>
</div>
<div data-role="content">
<h4>Welcome to Home Page</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit aliquet arcu </p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!--Page one ends here-->
The above code what you see is a jQuery Mobile Page. Similarly, we have to create 2 more. So that we'll have our 3 Pages what we had planned for.
Here are the other two pages:
<!--Page two starts here-->
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header">
<h1>Page One</h1>
<div align="center"> <a href="#page1" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">Home</a> <a href="#page3" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">Contact us</a> </div>
</div>
<div data-role="content">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit aliquet arcu sit amet sodales </p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!--Page two ends here-->
<!--Page three starts here-->
<div data-role="page" id="page3" data-add-back-btn="true">
<div data-role="header">
<h1>Page One</h1>
<div align="center"> <a href="#page1" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">Home</a> <a href="#page2" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right" data-theme="b">About us</a> </div>
</div>
<div data-role="content">
<h4>Contact Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit aliquet arcu sit amet sodales. </p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<!--Page three ends here-->
So just copy and paste all the 3 page one below the other in you HTML Page and you are ready with you jQuery Mobile Website with 3 Pages which are also easily Navigate-able.
What we did?
- We created 3 jQuery Mobile Pages
- Provided with Navigation system
- Gave them Back button, so that you could also navigate back as well.
OR
Even, you can upload your files to PhoneGap and get the apk so that you can test your Website as an application on your Mobile Device.
PhoneGap supports jQuery Mobile Framework for various Platforms like: iOS, Android, Samsung, Windows Phone etc.
Your final output should be exactly like the below screenshot. Else, you've done some mistake while copying the code.
 | |
| Web Design and Development - Final output of jQuery Mobile Website |
Here is the full working example for free to to download
So guys, Enjoy using jQuery Mobile Framework.
0 comments:
Post a Comment