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.

Getting Started

Last week we introduced JQuery Mobile as a new option for mobile software development. JQuery Mobile is from the same team that has produced the popular JQuery Project.

In this article we take a look at a basic JQuery Mobile-based application.

The example code for this article is hosted at http://jquery.lm.msiservices.com and should be viewed with a WebKit based browser including but not limited to the following browser platforms:

  • Chrome
  • Safari or webkit nightly build
  • Android
  • iPhone/iPad
  • Palm WebOS

The ingredients, HTML5 from the start

The doctype declaration of a JQuery Mobile application follows the HTML5 requirement:

<!DOCTYPE HTML>

Next comes the html head section:

<!DOCTYPE html>
<html>
<head>
<title>Linux Mag JQuery Mobile Sample</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script
src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>

The items to note here:

  • Style sheet reference. JQuery Mobile relies heavily on CSS.
  • Javascript include of the core JQuery library. Note that JQuery Mobile relies upon JQuery 1.4.4 or later.
  • Javascript include of the JQuery Mobile library.

These includes are for the Alpha 2 release of JQuery Mobile.

When using libraries such as JQuery Mobile, these include files are used on virtually every page of your site or application. The terminolgy is getting blurred of late between what is a site or an application. I’ll leave that debate to others who are more interested in semantics.

The important aspect of the includes is that they need to be download from someone’s server. Broadly speaking there are two common practices:

  • Option one is to download a copy of the needed include files and distribute them from your own server. The benefit of this approach is that your application won’t have unexpected changes occuring in the core library components. The downside is that you don’t get the latest features and bug fixes automatically. Additionally if you serve these files over and over from your own web server it may have a negative impact on your application’s performance and the bandwidth consumed may lead to increased hosting costs.
  • The second option is to use a hosted version available from others such as Google or the JQuery project themselves. You can download the required files from JQuery’s Content Delivery Network (CDN). To learn more about this option visit the JQuery Mobile download page.

Now that we’ve got the required files into our application, let’s look at application structure.

HTML5 attributes

JQuery Mobile relies heavily on the HTML5 data attribute. This attribute is somewhat of a magic bullet to HTML5. Any attribute which starts with “data-” is ignored by the rendering engine and is available for pushing data, instructions, etc. to an application. In the case of JQuery Mobile, the data attribute is used to help with application structure. Let’s look at an example.

The “data-role” attribute is used by JQuery Mobile to segment html elements into pages and parts of pages.

The image below shows the first page of the sample application.

First page of JQuery Mobile sample application
First page of JQuery Mobile sample application

Here is the code which corresponds to the prior screen shot:

<div data-role="page" id="page1">
	<div data-role="header">
	<h1>Header goes here</h1>
	</div>
	<div data-role="content">
	Content goes here
	<a href="#page2" data-transition="slide">Slide to page two</a><br/>
	</div>
	<div data-role="footer">
	Footer, Copyright, etc.
	</div>
</div>

The page includes a header portion, a content portion, and a footer portion. Each of these is implemented as a div element and designated via the data-role attribute. Additionally the data-role tag is used to delineate a “page”. So, for starters we are interested in four values of the data-role attribute used by the div tag:

  • page
  • header
  • content
  • footer

Comments on "JQuery Mobile Preview, Part 2"

Great article. I had been checking continuously this particular blog site with this particular impressed! Extremely helpful data especially the greatest segment :) I actually take good care of this kind of info a good deal. I used to be trying to find this particular a number of information and facts to get a long time. Appreciate it along with best of luck.

Reply

thank you for share!

Reply

I believe everything posted was actually very reasonable.
But, what about this? what if you wrote a catchier post
title? I ain’t saying your content is not good, but suppose you added a title to possibly grab
people’s attention? I mean JQuery Mobile Preview, Part 2 | Linux Magazine is
kinda boring. You might look at Yahoo’s home page and note how they
create post headlines to get people to open the links. You might add a related video
or a related pic or two to grab readers excited about everything’ve got to say.
Just my opinion, it would bring your blog a little livelier.|

my web-site: webpage – Alicia,

Reply

This is the right webpage for anyone who wishes to find out about this topic.
You understand so much its almost tough to argue with you (not that I personally
will need to…HaHa). You certainly put a new spin on a topic that has been written about for ages.

Great stuff, just wonderful!|

My web blog – program do rozliczania pit 2014 (noweprogramypity2014.pl)

Reply

I leave a leave a response when I appreciate a post on a
website or I have something to valuable to contribute to the conversation.
It is caused by the passion communicated in the post I looked at.
And after this article JQuery Mobile Preview, Part 2 | Linux Magazine.

I was excited enough to post a comment ;-) I do
have a few questions for you if you do not mind.
Could it be just me or does it look like like a few of
these responses come across as if they are written
by brain dead people? :-P And, if you are posting at other online
social sites, I’d like to follow you. Could you list all of your public sites like your Facebook page, twitter
feed, or linkedin profile?|

Here is my web-site; web page (Gay)

Reply

Since the admin of this website is working, no doubt very rapidly it will be famous,
due to its feature contents.|

Visit my blog … web site; Jaimie,

Reply

My web-site; webpage (Lorie)

Reply

I want?d to thank ?ou foor this fantastic read!! I definitely loved every bit of
it. I ?ave y?ou bookmarked to check out new stuff y?u post…|

Here is my web site … program do rozliczania pitów 2013

Reply

Hurrah, that’s what I was looking for, what a material!
present here at this blog, thanks admin of this web page.|

my website; pity 2013 program

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>