We whip up a small sample app to see just how much heavy-lifting jQuery takes off a mobile developer's hands.
Additionally, the “id” tag is useful when placing multiple “pages” within a single html file. Of course, the html content may be generated from a dynamic server platform such as PHP, ASP, JSP, etc.
Note the single anchor tag which has as its href a reference to “#page2″. The # character is used heavily in JQuery Mobile to help navigate pages and is used to build a “hash” of the pages for navigation. Consequently you cannot casually use the #name anchor to a deep link in another page as traditionally done in web programming.
Let’s now look at screen shots and respective code listings for the balance of the application, step by step.
From the first page, select the link and you are taken to the second page of the application.
Second page of application
This page is implemented with the following html snippet:
<div data-role="page" id="page2">
<div data-role="header">
<h1>2nd Header goes here</h1>
</div>
<div data-role="content">
2nd page Content goes here<br/>
<a href="http://jquery.lm.msiservices.com/foo.html" data-rel="dialog" data-transition="pop">pop to page three (separate html page)</a><br/>
<a href="#page3" data-transition="pop">pop to page three (local)</a>
</div>
<div data-role="footer">
Footer, Copyright, etc.
</div>
</div>
This page’s header and footer are of little interest, however the content section contains two links that are worth examining.
The first link is a fully qualified url to a different page — in this case foo.html.
The anchor tag contains two data-* attributes. Remember data- attributes are important to JQuery Mobile. In this case, the data-rel attribute tells JQuery Mobile that this page should be shown as a dialog. This causes a different look and feel to come about when the page is shown. This is driven by the CSS and JQuery Mobile’s theming capabilities. We won’t cover theming in this article but you can read more about it here.
The data-transition attribute tells JQuery Mobile that you want a popup effect.
Click the X to close the dialog
The source for foo.html is shown below.
<!DOCTYPE html>
<html>
<head>
<title>linuxdls JQuery Mobile Page</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script
src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Alternate Page 3Header goes here</h1>
</div>
<div data-role="content">
Page 3 as Dialog Content goes here
<div data-role="collapsible" data-collapsed="true">
<h1>Sub content goes here</h1>
<p>Hey, jquery mobile is coming along.... before too long we can use it for real?</p>
</div>
</div>
<div data-role="footer">
Footer, Copyright, etc.
</div>
</div>
</body>
</html>
Now, let’s look at the other link which is simply to “#page3″. This is a JQuery Mobile page defined directly within index.html (our primary page).
<a href="#page3" data-transition="pop">pop to page three (local)</a>
Note that this link does not have the data-rel=”dialog” attribute but it does have the transition set to pop. As you can see in the next image, we don’t have the dialog-box look and feel, though the link is brought up with a pop transition.
Third page of content in the application
Here is the code for page3:
<div data-role="page" id="page3">
<div data-role="header">
<h1>page 3 Header goes here</h1>
</div>
<div data-role="content">
Page 3 Content goes here
<div data-role="collapsible" data-collapsed="false">
<h1>Sub content goes here</h1>
<p>Hey, jquery mobile is coming along.... before too long we can use it for real?</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h1>Another entry here</h1>
<p>Some more data goes here....</p>
</div>
</div>
<div data-role="footer">
Footer, Copyright, etc.
</div>
</div>
Both the page3 code and the foo.html contain additional examples of data- attributes. In our next article we will take a look at some more JQuery Mobile attributes and features, including form management. Until then, happy coding.
Fatal error: Call to undefined function aa_author_bios() in /opt/apache/dms/b2b/linuxdls.com/site/www/htdocs/wp-content/themes/linuxmag/single.php on line 62
