How to Use jQuery Mobile
jQuery Mobile is incredibly easy to use, just include the jQuery Mobile files in your header and add a few
data attributes to your markup and you’re set. All of the styling is handled by jQuery and the included CSS file, so you can literally create a complete mobile webpage in minutes. In the example below, we’ll create a simple page that loads internal links using a variety of transition effects. The first few steps will outline the generic usage of jQuery Mobile while the rest will take a look at the specific elements used in the demo.
Step 1. Include the jQuery Mobile Files in Header
This step is pretty self-explanatory: just include the framework files. You can download them from the jQuery Mobile site or load the files directly from their site/CDN, which will reduce bandwidth costs and keep your website speedy.
Step 2. Use data attribute in HTML markup
data attribute tags to your HTML, where n is the available feature you want to set, for example:
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Transition Effects</li>
<li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li>
<li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li>
<li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li>
<li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li>
<li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li>
<li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li>
<br /><br />
<ul data-role="listview" data-dividertheme="e">
<li data-role="list-divider">Seamless List (margin-less)</li>
<li><a href="#" data-transition="slide">Example Item 1</a></li>
<li><a href="#" data-transition="slide">Example Item 2</a></li>
<li><a href="#" data-transition="slide">Example Item 3</a></li>
<div data-role="footer" data-position="fixed">
<h1>© Copyright Info or Site URL</h1>
data-role element specifies which DIV/block should be used for the header, footer and content, all of which are inside the main page wrapper. Here are the
data attributes used in this example:
- data-role – specifies the nature of the wrapper element, can be set to: page, header, content, footer. Two other settings were used in the example to indicate list elements and list dividers, for which the attribute was set to: listview for the main list element and list-divider for the list divider. There are a few other available settings, including collapsible, which creates a collapsible/show-hide block (more info).
- data-position – specifies whether the element should be fixed, in which case it will render at the top (for header) or bottom (for footer)
- data-inset – specifies whether element should be within content margins or outside of it (flush or with margin) – set to true or false
- data-transition – specifies which transition to use when loading new pages, can be set to: slide, slideup, slidedown, pop, flip or fade
- data-theme – specifies which design theme to use for elements within container, can be set to: a, b, c, d, e
- data-dividertheme – specifies the theme for the list dividers using same options as data-theme
Step 3. Add content and publish online!
Using the above example, the template found on jQueryMobile.com or creating your own layout, populate the blocks with your own content and upload the files. Currently, jQuery Mobile renders the pages the same on mobile and desktop browsers, so you don’t necessarily need a smartphone to test it out (though having one can help ironing out bugs).
Accessibility and Precautions
That said, is it worth investing the time and energy to use jQuery Mobile over the other available mobile frameworks, even though it’s in the alpha development phase right now? I would say yes, absolutely – this is a framework that has huge momentum behind it right now and will only get better with time. As long as you’re staying on top of updates and changes, you should definitely start getting familiar with this framework if you’re planning on doing some mobile-friendly web development.
An additional benefit of jQuery Mobile is that it makes loading pages using AJAX automatic. Add an iPhone home screen icon to your application and iOS will cleverly hide Safari controls, mimicking native applications.
About the Example
The downloadable example above includes is split into a header and footer file for the sake of convenience, feel free to use whatever coding method you prefer. I may end up creating a simple MVC framework using jQuery Mobile that makes it easier to develop a dynamic mobile app, in which case I’ll be sure to post it on this blog. If you’d be interested in something like that, leave a comment below and I’ll try to bump up it’s priority on my huge list of to-dos.
That wraps it up for part 2 of the Mobile Web Development series. Be sure to check out part 1, an Introduction to Mobile Web Development, if you missed it earlier. In the next part, we’ll take a look at the various other mobile web frameworks out there, so stay tuned!