Tuesday, March 13, 2012

jQuery Mobile: The Basics

Building a page

Building a basic page using jQuery Mobile requires a working knowledge of HTML and CSS, but doesn’t require knowledge of JavaScript or other more advanced coding and markup languages. For some elements, such as forms, some knowledge of PHP is helpful, but creating a basic mobile-enabled site doesn't require it.

To start off, copy and paste the following into your HTML editor:



Open that file in your browser and voila--you've got a working mobile page!

Within the head you might notice that the file is referencing the jQuery Mobile and jQuery libraries and the jQuery Mobile CSS file:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

You can find the most up-to-date version of these files at the jQuery Mobile website under download: http://jquerymobile.com/download/. There are two ways to access the jQuery mobile library--first is to simply link to the latest stable version of jQuery Mobile. You’ll periodically want to check for more recent versions and test these out with your page. Second is to host the files yourself. It’s possible to make changes to the jQuery Mobile library in order to customize how certain pieces of it behave, in which case you would want to host the file yourself.

Also included in the head is a meta viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This tag will help the page adjust the page width to equal the screen size of the device someone is using to access your page. The viewport tag and much of the other code we’ll be looking at today are pieces of code that you can find directly in the jQuery Mobile documentation. http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-anatomy.html

jQuery Mobile makes use of divs (divisions--I kind of think of them as content “buckets”) with a specified data-role attribute to identify elements of a page and display them in a certain way. Data-role is an HTML5 attribute. Each page is made up of a single “main” div with the data-role of page. Within the main page wrapper, there are three more divs stacked on top of each other, header, content and footer:


All of these are technically optional, so you can easily create a page without a header or footer if you would like to do so. You can use HTML pretty freely within each of these divs.

Themes

A page can also be assigned the attribute data-theme with a value of A-E to give jQuery Mobile a consistent styled look. jQuery Mobile has five default theme "swatches" available, but you can easily create a new theme with your own swatches using jQuery's online themeroller, which will help you create a custom CSS file which you can download and then upload to your own server, and then reference along with the jQuery libraries and CSS.


This code will output like this:

Basic mobile page.

Stacking Pages

There are two ways to organize a website using jQuery Mobile. First, you can create a separate file for each page like you would if you were using just basic HTML to create a website. The second option is to stack multiple page divs inside a single HTML file. If you choose to use a single file, each page must be given a separate ID by giving the page div the attribute page-id with a unique value. This value will be used to link to and identify pages internally. To get to a particular page within a single file, you'll enter the file's URL followed by a number sign (pound sign/hash) and the page's id. For the page below, for instance, the URL would be http://people.cornellcollege.edu/bbergantzel/jquery_mobile/index.html#two.


Creating a Listview

One element often seen in mobile design is a linked menu or listview. jQuery Mobile makes these easy to create. You'll created a basic unordered list with list items than are also linked. To give the list the stylized look of a menu, simply add the data-role attribute with a value of "listview". Another attribute associated with the data-role of listview is data-inset, which can have a value of true or false. When set to true, the list is set in from the sides of the screen.

An inset listview.

Creating a Button

Creating a button is also as simple as giving an element the data-role attribute with a value of "button". In this case, the first button is a link format which will open up any available phone feature of the device with the number already entered, ready for the user to hit send. The second button is similar, but links to the phone's texting app instead.

Buttons using above code.

Adding Buttons/Icons to the Header

jQuery Mobile allows you to add buttons to the header fairly easily.  One option is an automated back button.  You can add this to the header by adding an attribute to the PAGE div--data-add-back-btn--and setting it to true.  This button is automatically formatted and will point to whatever the previously visited page is.

<div data-role="page" id="two" data-add-back-btn="true">

Another useful ability to have is adding an icon to the right side of the header.  You can do that by adding a link with data-icon and class attributes after the text in the header.  The value for data-icon in this example is home, but there are a number of icons included with jQuery Mobile.  We're also using a CSS class, ui-btn-right, to place the button where we'd like it to appear.


Back and Home buttons in the header.


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)