(http://ofps.oreilly.com/titles/9780596805784/ch03_id35816678.html)
I then started in on Chapter 4. However, it works with jQTouch. jQtouch seems great, but apparently it's no longer being actively developed and seem to have been more or less supersceded by jQuery Mobile. There are also a number of other platforms out there, but I'm going to focus on jQuery mobile for a couple of reasons:
1) It seems to be quick to learn
2) I want to get more familiar with javascript in general.
There's a nice little summary that gives a clear, quick overview of its features here:
http://qpants.wordpress.com/2010/10/19/jquerymobile-review/
So, going to the jQuery mobile page, let's walk through the intro tutorial. It's at http://jquerymobile.com/demos/1.0/docs/about/getting-started.html
Getting Started with jQuery Mobile
jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy, here's how:
Create a basic page template
Pop open your favorite text editor, paste in the page template below, save and open in a browser. You are now a mobile developer!
Here's what's in the template. In the head, a meta viewport tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts.
In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role="header") and content region (data-role="content") are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes are used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
Here's the template:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A couple of key points - the whole app is in a single page. Html5's "data-role" is used in "div" declarations to distinguish between pages, headers, content etc.
So, let's bring this up in safari and see how it looks. Btw, I just learned a nice trick for displaying static html files in the iOS simulator safari browser - just drag and drop in into the simulator. There's no need even to start safari!
I wanted to show how it looks, but I'm having trouble pasting the image, I'll try to add it later.
Continuing:
Add your content
Inside your content container, you can add all any standard HTML elements - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the head after the jQuery Mobile stylesheet.
Make a listview
jQuery Mobile includes a diverse set of common listviews that are coded as lists with a data-role="listview" added. Here is a simple linked list that has a role of listview. We're going to make this look like an inset module by adding a data-inset="true" and add a dynamic search filter with the data-filter="true" attributes.
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
Ok, so let's add this to the html just created under the div with the "content" role.
Very nice - a cool, iPhone-ish looking listview which includes a search. The search works out of box, although not quite as you'd expect - it finds any items that contain the string entered, as opposed to starting with it.
Continuing on:
Add a slider
The framework contains a full set of form elements that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no data-role needed. Be sure to wrap these in a form element and always properly associate a label to every form element.
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
</form>
Nice - you get a pretty little slider with a label whose text changes as you move the slider.
Next:
Make a button
There are a few ways to make buttons, but lets turn a link into a button so it's easy to click. Just start with a link and add a data-role="button" attribute to it. You can add an icon with the data-icon attribute and optionally set its position with the data-iconpos attribute.
<a href="#" data-role="button" data-icon="star">Star button</a>
Nice - a button that take you to the specified link. In this case, it's just the same page, but you could paste an address for anywhere.
Next - themes!
Play with theme swatches
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a data-theme="e" attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches.
Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers don't inherit, they default to swatch A).
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
Very nice. Different colored buttons, and themes.
So, this was a nice little tutorial on some of the basics of jQuery Mobile. I'm going to try do a static page on it first. Later on, I'll check it for database access.
No comments:
Post a Comment