Utilizing frameworks like JQuery Mobile will help you create a mobile version of your site or application rapidly. JQuery Mobile includes a theming system for easily scalable UI/UX cohesion. In this tutorial we’re going to get up and running with JQuery Mobile, and go over the basics of the framework.

Set Up

First we’re going to set up a plain HTML file with JQuery Mobile and then add some data attributes to make sure JQuery Mobile is actually working. Let’s start by writing the following and saving it as index.html:

As you can see, we have a pretty basic setup here. We’re calling in our dependencies within the head element, then we’re defining a few data roles. The first data role page should be applied to a div that wraps a “page” of the application. Within our page, we need a header data role, within that we can place our title as an h1 element. After the closing header data role’s tag we implement the content data role.

All of your content for this specific page will be placed inside this element. These data roles are important because JQuery Mobile picks up hints about how to structure your interface using these attributes.

You should now have a basic page if you load your code into a browser.


Next we’re going to add another page, and a button on each page to switch pages, the full code is below:

You can see we cloned the code from the first page, and then put unique data on each page including the button text and headers. Now when you click the button on each page, you should be able to show and hide the pages automatically. You will also notice that the JQuery Mobile framework has added in transition animations to enhance your application’s user experience.

To learn more about JQuery Mobile visit next in the JQuery Mobile series we’ll show you how to implement standard mobile interface features like listviews, forms, and more.