Skip to main content

Simple App Creation Using jQuery Mobile

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95


jQuery has successfully reached the world of mobile phones. It’s called jQuery Mobile, It’s incredibly easy to use, you just have to include the jQuery Mobile files in your header and add few data attributes to your markup and you’re all set. All styling is handled by jQuery and the ncluded CSS file, so you can create a complete mobile webpage in just a matter of minutes. In this example, we’re going to create a simple page that loads internal links using transition effects. The first steps will outline the generic usage of jQuery Mobile whereas the rest will take a peek at the specific elements used in the demo.

jQuery Mobile Files in Header

This straightforward; you just have to include the framework files. You can download them from the jQuery Mobile site or load the files from their own site or CDN, which will reduce bandwidth costs and keep your website speedy.

<link rel="stylesheet" href="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

HTML markup attribute

Apply the data attribute tags to your HTML, where n is the feature you want to set.

<div data-role="page" data-theme="b">
        <div data-role="header" data-theme="b">
            <h1>My Site</h1>
        <div data-role="content">
            <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>&copy; Copyright Info or Site URL</h1>

The data-role elements specify which DIV/block should be used in favor of header, footer and content, all of which are in the main page wrapper. Here are the data attributes used in this example.

  • Data-role – specifies the nature of the wrapper element that can be set to page, header, content and footer.
  • Data-position – specifies whether the element should be fixed that renders at the top or bottom.
  • Data-Inset – Specifies whether the element should be inside content margins or outside.
  • Data-transition – Specifies which transition to use when new page loads. It can be set to slide, slideup, slidedown, pop, flip or fade.
  • Data-theme – specifies which design theme to use for elements.
  • Data-dividertheme – specifies the theme for the list dividers that uses same options as the data-theme.

Add content / Publish online

jQuery Mobie renders the same behaviors as the desktop browsers, You don’t really have to provide your smartphone though it could help ironing bugs.

Example Explained

The example above included is split into a header and footer file for the convenience, always feel free to use whatever coding method you prefer.


jQuery definitely begins to be part of our designing world today. So I won’t be surprise if the time came that even the smallest internet device reads jQuery.

See live demo

Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript

A practical guide to leading radical innovation and growth.

Integromat Tower Ad