jQuery Mobile Framework is a light-weight framework to create
HTML5-based interface system, which works seamlessly on
various types of mobile device platforms. It is created on top
of powerful jQuery and jQuery UI which are known to create
high quality, light weight rich internet applications. As with
jQuery and jQuery UI, jquery mobile framework helps to create
a lightweight codebase with flexible and easily theme-able
design.
jQuery Mobiles has targeted multiple mobile devices available in the market. And the code is tested on majority of the mobile browsers which have got some visibility in the market. To achieve this goal, pages of the jQuery mobile are built with clean semantic HTML so that the page can be displayed on diverse mobile platform.
And to add additional features like rich interactivity, animation and other such features for the browsers who support CSS and JavaScript, progressive enhancement techniques can be applied. Using this technique the basic HTML page can be converted into rich interactive pages by using the functionality provided by the jQuery framework and CSS. Accessibility features such as WAI-ARIA is also given due consideration and is integrated with the framework.
Key Features of jQuery Mobile Framework
Built on jQuery core, compatible with all major mobile & desktop platforms, Lightweight size, HTML5 Markup-driven configuration, Progressive enhancement , Automatic initialization, Accessibility features such as WAI-ARIA, Touch and mouse event support, UI widgets, Powerful theming framework.
jQuery Mobile Framework – Supported platforms
jQuery Mobile works on all popular modern desktop platforms
and smartphone, tablet, and e-reader platforms. It also
supports the older browsers and feature phones. jQuery is
dedicated to come up with the framework which supports major
mobile devices. They have already tested the application
created with jQuery mobile on major devices and browsers. And
they are working towards completing the test on others as
well.
Few mobile devices where it is already tested in full mode
are:
Apple iOS 3.2-5.0 beta, Android 2.1-2.3, Android Honeycomb,
Windows Phone 7 , Blackberry Playbook, Blackberry 6.0, Palm
WebOS (1.4-2.0), Palm WebOS 3.0, Firebox Mobile (Beta), Opera
Mobile 11.0, Kindle 3, Chrome Desktop 11-13, Firefox Desktop
3.6-4.0 ,Internet Explorer 7-9, Opera Desktop 10-11
Sample Applications of jQuery Mobile Framework
Now let's see how to create a sample page using jQuery Mobile framework. jQuery Mobile framework provides a page structure which is optimized to support either single pages, or local internal linked "pages" within a page. You can create your sample application using the page structure.
First let's explore the structure of a Mobile Page:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<title>My First page </title>
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="css/jquery.mobile.min.css"
/>
<script
type="text/javascript"
src="js/jquery.min.js"></script>
<script
type="text/javascript"
src= "js/jquery.mobile-min.js"></script>
</head>
<body>
<div
data-role="page">
<div
data-role="header">Header</div>
<div
data-role="content">Hello World, This is my first
page</div>
<div
data-role="footer">Footer</div>
</div>
</body>
</html>
|
In order to make full advantage of all the features provided
by framework, your page must start with doc type declaration.
Then as with the usual sites reference to the CSS and the JS
files has to be included in the head section. The required CSS
and Js files can be downloaded from the below mentioned
link:
http://jquerymobile.com/download/
Body
<div data-role="page">
Above tag defines the view/page for the mobile device. You can define multiple views/ pages for an HTML page.
|
1
2
3
4
5
|
<div
data-role="page">
<div
data-role="header">...</div>
<div
data-role="content">...</div>
<div
data-role="footer">...</div>
</div>
|
Within the page multiple sections can be defined like header, footer and the page content.
Sample Code for Multiple Page template :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<body>
<!-- Start of first page -->
<div
data-role="page"
id="first">
<div
data-role="header">
<h1>First Page</h1>
</div>
<div
data-role="content">
<p>This is my first page created using
jQuery Mobile</p>
<p>View Second <a
href="#second">Second Page</a></p>
</div>
<div
data-role="footer">
<h4>This is the footer of the Page</h4>
</div>
</div>
<!--start of second page-?
<div
data-role="page"
id="second">
<div
data-role="header">
<h1>Second page</h1>
</div>
<div
data-role="content">
<p>See this is the second page of my
site.</p>
<p><a
href="#first">Back to First Page</a></p>
</div>
<div
data-role="footer">
<h4>Footer of my page</h4>
</div>
</div>
</body>
</html>
|
The above code creates two views within the HTML page and the user can switch between the two views by clicking the links provided.
Complete code:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html>
<head>
<title>My First page </title>
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="css/jquery.mobile.min.css"
/>
<script
type="text/javascript"
src="js/jquery.min.js"></script>
<script
type="text/javascript"
src= "js/jquery.mobile-min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div
data-role="page"
id="first">
<div
data-role="header">
<h1>First Page</h1>
</div>
<div
data-role="content">
<p>This is my first page created using
jQuery Mobile</p>
<p>View Second <a
href="#second">Second Page</a></p>
</div>
<div
data-role="footer">
<h4>This is the footer of the Page</h4>
</div>
</div>
<div
data-role="page"
id="second">
<div
data-role="header">
<h1>Second page</h1>
</div>
<div
data-role="content">
<p>See this is the second page of my
site.</p>
<p><a
href="#first">Back to First Page</a></p>
</div>
<div
data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
|