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.
The framework itself is a separated from jQuery core, which you have to download it from jQuery Mobile Official Website.
The jQuery Mobile framework currently is supporting 3 graded devices:
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:
The devices / platforms that fall under grade B, are able to view jQuery Mobile page with enhanced experience EXCEPT without Ajax navigation features.
Lastly, grade C devices / platforms users are able to view the basic content and access basic functionality of page. The devices / platforms are:
For full list of updated devices / platforms, please visit jQuery Mobile site for more information.
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:
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>
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.
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!