dcsimg

JQuery Mobile Preview, Part 2

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
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
Click the X to close the dialog

The source for foo.html is shown below.

<!DOCTYPE html>
<html>
<head>
<title>Linux Mag 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
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.

Comments on "JQuery Mobile Preview, Part 2"

My web-site regal assets review (Luz)

We came across a cool web-site that you could possibly enjoy. Take a search for those who want.

my blog – regal assets review (Randy)

Here is my blog … buy beats online (Bobby)

Here is my homepage reviews of regal assets (Birgit)

my webpage: regal assets reviews (Tiffani)

We came across a cool website that you just may possibly appreciate. Take a look for those who want.

Check out my weblog: regal assets reviews (Casie)

My webpage regal assets review (521sh.net)

Visit my website … regal assets review (http://www.qimila5.com)

Feel free to surf to my web blog rap beats [Enid]

my web page :: regal assets review (Marcela)

My weblog; regal assets review (Rodney)

Feel free to surf to my web-site :: regal assets reviews – Darren,

Feel free to surf to my weblog – regal assets reviews; Florencia,

Here is my page :: regal assets review [Allie]

Here is a superb Blog You may Uncover Interesting that we encourage you to visit.

my site: buy beats (Tiffiny)

My web site buy rap beats online (Loreen)

Although sites we backlink to beneath are considerably not associated to ours, we really feel they are really really worth a go by means of, so possess a look.

My blog post reviews of regal assets (Young)

Also visit my website: reviews of regal assets (Donnie)

Leave a Reply