As part of this effort, let's explore this tutorial:
http://www.codeforest.net/jquery-mobile-tutorial-basics
Here's the initial page:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial on Codeforest.net</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>The title</h1>
</div><!-- /header -->
<div data-role="content">
<p>The content</p>
</div><!-- /content -->
<div data-role="footer">
<h4>The Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
If we open this in the browser, we get a pretty cool looking page:
If you look closely, you will some strange attributes like data-role. It is exactly these attributes that are telling jQuery Mobile what this element is, how to look like and how to behave.
So, let us do something fancy now. There are two type of linking inside jQuery Mobile, External and Internal. Let me show you the magic:
The data-roles are what I think of as "presentation-roles" because they style the data, but anyway it looks great.
External linking
By default, when you click on a link that points to an external page (ex. products.html), the framework will parse the link’s href to formulate an Ajax request (Hijax) and displays the loading spinner.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
If the Ajax request fails, the framework will display a small error message overlay that disappears after a brief time so this doesn’t break the navigation flow.
So, there's the concept of external page.
Let's try the next example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial on Codeforest.net</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>Some Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>The content</p>
<p><a href="index.php">Click me to show the first page!</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer-->
</div><!-- /page -->
</body>
</html>
It adds a link.
Of course, when I click, it just sits there spinning, because I don't have an index.php set up. Was I supposed to?
Anyway, the next example addresses this shortcoming.
Internal linking
A single HTML document can contain multiple pages that are loaded together by stacking multiple divs with a data-role of “page”. Each page block needs a unique ID (id=”first”) that will be used to link internally between pages (href=”#first”). When a link is clicked, the framework will look for an internal page with the ID and transition it into view.
Ok, I can understand that.
Here's the example:
<!-- Start of first page -->
<div data-role="page" id="first">
<div data-role="header">
<h1>First</h1>
</div><!-- /header -->
<div data-role="content">
<p>The content</p>
<p>View internal page called <a href="#second">second</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="second">
<div data-role="header">
<h1>Second</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second content</p>
<p><a href="#first">Back to first</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
Unfortunately, this is a bit less impressive, presumably due to the lack of style sheets. Let's remedy that by doing what they must have intended, and include them:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial on Codeforest.net</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>
<!-- Start of first page -->
<div data-role="page" id="first">
<div data-role="header">
<h1>First</h1>
</div><!-- /header -->
<div data-role="content">
<p>The content</p>
<p>View internal page called <a href="#second">second</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="second">
<div data-role="header">
<h1>Second</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second content</p>
<p><a href="#first">Back to first</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
And what you and up is a very nice back and forth navigation, looking very apple-like with a back button and the second page and the same kind of sideways-screen movement navigation. Very cool :)
Note the "back" button.
Very nice. What's next on the docket?
Themes
You can easily use themes anything in jQuery Mobile with data-theme attribute. Try something like this:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Tutorial on Codeforest.net</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" data-theme="b">
<h1>The title</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<p>The content</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>The Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
Notice the "data-theme" - there are 26 of them to choose from, a-z.
Let's check it out...nice! Note the blue and grey with gradients, apple-type theme:
Here's the finish of the page:
Try it in your browser and you should have a nice bluish theme. You can try other letters like e or a.
That’s it for the basics. Next time we will start building our sample web page in jQuery Mobile from scratch. I hope you like this amazing piece of software and realize how easy it is to get started.
I'm kind of stoked that this library is available. Building an interface using this looks like it could be relatively easy. And also, it's a chance to build on and brush up on the web skills I've learned in the past. I'm definitely going to drill into this more deeply.
No comments:
Post a Comment