- Tutorials / JavaScript / Tutorials / Mobile Web Development
- Friday, 29th Jun, 2012
Home » Tutorials » JavaScript » JQuery Mobile for Absolute Beginners – Part 1
The Full Series
Over the past few years, the iPhone 3GS gains attention from the public, smart devices started to appear that allowed us to do personal email, virtual social, e-commerce and the mobile era began to grow. We have seen a tremendous growth in browser and OS support for mobile websites, most notably is Apple iOS devices and Google Android Devices.
Due to multiple platforms, screen sizes, browsers, up until recently it was still very difficult to design and develop a single piece of mobile theme that able to work across all these platforms and deceives. Thanks god that, jQuery mobile has come to solve all these problem for us.
Introduction to jQuery Mobile
The jQuery Mobile is a framework that built on top of the jQuery and jQuery UI foundation. The framework allow us to develop a single mobile web applications that work across smartphones, platforms and tablets. In addition, one for the great features that jQuery Mobile is “Progressive enhancement and graceful degradation“, which means that jQuery Mobile will fully leverages the latest HTML5, CSS3, and JavaScript on the supported modern devices and will still provide the best possible experience, basic functionality and basic content for less capable devices as well.
The framework itself is a separated from jQuery core, which you have to download it from jQuery Mobile Official Website.
List of Supported Mobile Devices / OS Platforms
The jQuery Mobile framework currently is supporting 3 graded devices:
A Grade
The framework will provide full experience with Ajax-based animated page transitions to all platforms that fall under this category. Some of the common platforms that fall under this category are:
- Apple iOS 3.2-5.0
- Android 2.1-2.3
- Android 3.1 (Honeycomb)
- Android 4.0 (ICS)
- Windows Phone 7-7.5
- Blackberry 6.0, 7
- Blackberry Playbook (1.0-2.0)
- Firebox Mobile (10 Beta)
- Opera Mobile 11.5
- Kindle 3 and Fire
B Grade
The devices / platforms that fall under grade B, are able to view jQuery Mobile page with enhanced experience EXCEPT without Ajax navigation features.
- Blackberry 5.0
- Opera Mini (5.0-6.5)
- Nokia Symbian^3
C Grade
Lastly, grade C devices / platforms users are able to view the basic content and access basic functionality of page. The devices / platforms are:
- Blackberry 4.x
- Windows Mobile
- All older smartphone platforms and feature phones
For full list of updated devices / platforms, please visit jQuery Mobile site for more information.
The Basic Structure of jQuery Mobile Page
Ok, let’s start to build our first jQuery Mobile page. Before we start, we have to get to know the basic structure of a jQuery Mobile page. Basically, a jQuery Mobile page should consists of 3 sections, which is:
- Header bar: Usually contains page title and back button.
- Content region: All your page content should be placed under this section.
- Footer bar: Contain footer navigation and copyright information.
That’s it! Simple enough right? Let’s start to build it!
Open up your web authoring tools, and place the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial From onlyWebPro.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<div data-role="footer">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Explanation:
- At the first line, we have define the document type as HTML5 using <!DOCTYPE html>
- At line 05, we use the viewport meta tag to set the screen width to the pixel width of the device
- At lines 06, 07 and 08, we load 3 necessary jQuery Mobile components into the document
- At line 11 – 23, a div with a data-role of “page” is the wrapper used to delineate a page, and the header bar with data-role=”header”, content region div with data-role=”content” and footer bar with data-role=”footer” are added inside to create a basic jQuery Mobile page.
Do you notice that from the page wrapper, header bar till the footer bar, every one of it has an attribute call “data- “. These data- attributes are HTML5 attributes that used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget. We will cover the details on the upcoming tutorial.
Save your file and preview it on supported browser, you should see your document displayed exactly as the following image:
Yeah! You have just created a jQuery Mobile Page, which is work across devices, platforms and screen sizes.
Conclusion
You have just learned about the jQuery Mobile framework and how the framework optimized and rendered your mobile page on smartphones, tablets and less capable devices. Besides, you have also learned to create a jQuery Mobile page.
In the next tutorial, we will discuss on how the HTML5 data-* attributes that jQuery Mobile relies on to support various UI elements, transitions, and page structure as well. Stay tunes!
-
Rasu
-
onlyWebPro
-
-
Darlene Tate
-
onlyWebPro
-
-
网页游戏5299
onlyMobilePro.com