Simple App Creation Using jQuery Mobile

Introduction

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="https://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></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>
        <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>
            </ul>
            <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>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>&copy; Copyright Info or Site URL</h1>
        </div>
    </div>

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.

Conclusion

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
Download