jQuery Mobile

Getting Started with jQuery Mobile [VIDEO]

A very popular framework for building HTML5 mobile web apps is jQuery Mobile. The following video steps you through how to get started with a blank page and build your first Web app.

The first step in creating a jQuery Mobile web app is to create a standard HTML page. The following will do:

<html> <head> <meta charset=”UTF-8″> <title>jQuery Mobile Web App</title> </head> <body>

</body> </html>

In the HEAD element section you will want to add the following links to latest release of jQuery Mobile:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

The concept of “pages” in jQuery Mobile is not individual HTML documents but a classified section in between the BODY element on one document. This means you can have many “pages” in one HTML document. For instance, the following will add one page:

&lt;div data-role="page" id="page1"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;First Screen&lt;/h1&gt;
 &lt;/div&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;CONTENT&lt;/p&gt;
 &lt;/div&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;
 &lt;/div&gt;
 &lt;/div&gt;

You can now add a second, third or fourth screen all in the same HTML document, like this:

&lt;div data-role="page" id="<strong>page2</strong>"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Second Screen&lt;/h1&gt;
 &lt;/div&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;
 &lt;/div&gt;
 &lt;/div&gt;

The difference is the ID in the first line.

Each page has content you can format in it. This can include HEADER, FOOTER and elements such as BUTTON, FORM FIELDS and many more widget. The jQuery Mobile web site has a complete list of custom features you can add.

When you have completed your HTML editing, your page may look like this:

<DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>jQuery Mobile Web App</title>

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>

</head>

<body> <div data-role=”page” id=”page1″> <div data-role=”header”> <h1>First Screen</h1> </div> <div data-role=”content”>

&lt;ul data-role="listview" data-filter="true" data-filter-placeholder="Page #" data-inset="true"&gt;
 &lt;li&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#page2"&gt;Page Two&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#page3"&gt;Page Three&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#page4"&gt;Page Four&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

&lt;/div&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;
 &lt;/div&gt;
 &lt;/div&gt;

&lt;!-- second screen --&gt;

&lt;div data-role="page" id="page2"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Second Screen&lt;/h1&gt;
 &lt;/div&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;
 &lt;/div&gt;
 &lt;/div&gt;

&lt;!-- third screen --&gt;

&lt;div data-role="page" id="page3"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Third Screen&lt;/h1&gt;
 &lt;/div&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;
 &lt;/div&gt;
 &lt;/div&gt;

&lt;!-- fourth screen --&gt;

&lt;div data-role="page" id="page4"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Fourth Screen&lt;/h1&gt;
 &lt;/div&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;
 &lt;/div&gt;
 &lt;/div&gt;

&lt;/body&gt;
 &lt;/html&gt;

jQuery Mobile is easy to use and scales effectively across many device types.

jQuery Mobile
jQuery Mobile

 

Leave a Reply