Home Blog Web Development Getting Started with jQuery Mobile

Getting Started with jQuery Mobile

Web Development
Nov 10, 2013

Blueprint Digital

Insights from the Blueprint Digital team.

Summarize With ChatGPT

It has been discussed lots of time before, but mobile devices are really popular. As a front-end developer, one of the challenges in developing for mobile devices is that sometimes things look different depending on the platform. jQuery Mobile can change that.

What is jQuery Mobile?

jQuery Mobile is a touch-friendly mobile framework developed by the jQuery project team. It is built on jQuery Core. The aim for jQuery Mobile is to create a framework that will be compatible with all major mobile platforms such as iOS, Android, Windows Phone, etc.

The Structure

Below is the HTML markup for a quick demo that I made for this tutorial. The filler text is from Fillerati, which was featured in my other blog post, “Fun Lorem Ipsum Generators.” (As a bonus, see if you can recognize which classic literature the excerpt is from.)

Click on this link to see this code in action: Demo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>jQuery Mobile Demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/
        jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/
        jquery.mobile-1.3.2.min.js"></script>
    </head>
    <body>

        <header data-role="header">
            <h1>jQuery Mobile Demo</h1>
        </header>

        <article data-role="content">
            <ul data-role="listview" data-inset="true" data-filter="true"
            data-filter-placeholder="Try searching for Dorothy...">
                <li>"And I shall never see Aunt Em and Uncle Henry," said
                Dorothy, beginning to cry</li>
                <li> "Be careful!" cried the green girl</li>
                <li>  "The tears will fall on your green silk gown and spot
                it</li>
                <li>" So Dorothy dried her eyes and said, "I suppose we must try
                it; but I am sure I do not want to kill anybody, even to see Aunt
                Em again</li>
                <li>" "I will go with you; but I'm too much of a coward to kill
                the Witch," said the Lion</li>
                <li> "I will go too," declared the Scarecrow; "but I shall not be
                of much help to you, I am such a fool</li>
                <li>" "I haven't the heart to harm even a Witch," remarked the
                Tin Woodman; "but if you go I certainly shall go with you</li>
            </ul>
        </article>

        <footer data-role="footer" data-position="fixed">
            <nav data-role="navbar">
                <ul>
                    <li><a href="http://blueprintdigital.com"
                    data-icon="home">Blueprint Home</a></li>
                    <li><a href="http://blueprintdigital.com/getting-started-
                    jquery-mobile" data-icon="star">Blog Post</a></li>
                </ul>
            </nav>
        </footer>
    </body>
</html>

The Structure Explained

I used CDN-hosted files in this demo for a couple of reasons. Using CDN-hosted files is more beneficial for optimizing the page speed. Also, it is for the convenience as well because I am just using a default theme for this demo. However, if you are interested in delving into jQuery Mobile, you could make your own theme.

The most important thing about using jQuery Mobile is to use the HTML5 doctype. That is because jQuery Mobile heavily uses the HTML5 custom data attributes. For example, data-role attribute specifies the role of the content on the page such as header, footer, and content and also defines how the element should look. To make header or footer fixed on a page, you could set the data-position attribute as fixed. Another attribute I used in the example to set style is data-inset which will make the list inset so that it could be mixed with other contents.

You could specify functionalities with jQuery Mobile as well. For example, in the example above, I used data-filter to add a search functionality on the list. I also used data-filter-placeholder to set a custom placeholder text for the search box.

There are many more things that jQuery Mobile can do, and they are outlined in its own demo page.

Conclusion

There are a lot of benefits to using something like jQuery Mobile. First, jQuery Mobile is really easy to learn even without knowing the jQuery syntax. Also, jQuery Mobile works well in the responsive web design context, and widgets are built to be flexible in width. Overall, I think jQuery Mobile could be very useful in a front end development project.