Learning jQuery Mobile for Beginners

This jQuery Mobile Tutorial will help you start designing mobile experiences with HTML, JavaScript, and CSS.
4.0 (31 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,127 students enrolled
5% off
Take This Course
  • Lectures 84
  • Length 6.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2012 English

Course Description

In this Jquery Mobile Tutorial, you will learn all the basics of jQuery Mobile to get you up and running with the most popular JavaScript framework for creating mobile apps and mobile optimized web sites.  You'll Learn Jquery Mobile features on how to setup your navigation, customize transitions, all the major user interface components and the jQuery mobile event lifecycle.

What are the requirements?

  • Experience with HTML.
  • No prior jQuery or JavaScript knowledge required.
  • An HTML/JavaScript Editor (Your choice, I use Adobe Dreamweaver).
  • A WebKit Browser (Google Chrome or Apple Safari).
  • (Optional) Apple iOS Simulator (part of XCode) only for for Exercise 39,40 & 41

What am I going to get from this course?

  • Background and Software Requirements
  • Getting Started
  • Data Roles and Themes
  • Navigating and Transitions
  • Lists
  • Buttons
  • Forms
  • Content Formatting
  • Themeroller
  • Events

What is the target audience?

  • This course is created for both designers and developers. I don't assume any prior knowledge of jQuery.
  • The course goes at a pace comfortable for a beginner, but with rich enough content to keep an experienced developer engaged.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Background and Software Requirements

In this initial lesson, I cover the experience level necessary for this course, a bit of history of the jQuery Mobile framework, which software you'll need and how to download the course materials.

13 pages

You can review the PDF at your own pace and see the links to download software for this course

Section 2: Getting Started

Introduction to the Learning jQuery Mobile materials and Agenda for Lesson 1.

Exercise 1 covers using the HTML5 doctype, shows how to download a copy of the jQuery mobile library and include those files in your project.  Most importantly, how to tell if the library is initializing correctly.


In Exercise 2, we look at how to use jQuery libraries located on a Content Delivery Network along with the pros and cons of his method.


In exercise 1.3, we add the viewport meta data to assist mobile browsers in scaling your app to the devices height and width.

Section 3: Data Roles and Themes

In Exercise 2.1, you'll learn about data-roles and how they are used in jQuery to define pages, headers, footer and content areas. We'll use the data-position attribute to fix our footer to the bottom of your screen.


In Exercise 2.2, you'll learn about navigation bars.  We'll review the available icons you get with jQuery mobile and how to add them to the navigation buttons and position them.  We'll show how you can assign different data themes to different components.

In exercise 2.3, you get your first look at data-themes.
We'll look under the hood to see how jQuery Mobile styling is injected into your HTML to enhance your user interface.
Section 4: Navigating and Transitions

In Exercise 3.1, we look at how to navigate from one page to another html page in the same site.  We'll use the data-role button to create our link to the second page.  You'll see the default slide transtion and when you hit the back button you'll see jQuery mobile remembers the transition and does the reverse automatically back to the first page.


In Exercise 3.2, we'll navigate to another div inside the same page.  The div with have a data-role of page.  jQuery Mobile will automatically show the first div with a data-role page and hide all others.  When you navigate, you'll see the divs hide and show automatically.

Link Hijacking and AJAX

In this exercise,  we look at how to link to pages external to your domain name.


In this exercise, we'll look at navigating to a dialog box, both external and in the same page.  Also, how to create your own close button for a dialog page.


In this exercise , we look at how to set the default transition as well as target the transition of a single navigation. 

In this exercise, we'll look at how the back button works with jQuery Mobile
Section 5: Lists

In Exercise, we look at List basics.  You'll use the data-role equal to listview to turn a an unordered list into a styled navigation list you can use to navigate to other pages.  Also, how to add the data-insetto pad the list.


In Exercise, we'll create a list that navigates to dynamically created pages from nested lists.


In Exercise, we'll look at adding list dividers to group items within our lists.


In Exercise, we'll look how to create and style split lists to add multiple links to a single list item.


In Exercise, we'll look at styling additional text elements within a list.


In Exercise, we'll look at how to add images into your list element.


In Exercise, we'll add a serach filter to our list and how to style the filter box.  We wrap things up by adding a custom placeholder text into the filter box.

Section 6: Buttons

Review of using the anchor tag along with the data-role equal to button to create button.


In this exercise, we'll see how you input types equal to button, submit, reset and image are styled as buttons in jQuery mobile.  This is important for keeping the button behavior semantic for older browsers.  Also, how you can revert back to native rendering of the button using data-role equal to none


in this exercise, we look at how to add an icon to your button.  We also see how to position our icon on our button and hide our text label so just the icon is our button. As an extra, we had a data theme to change the color of our button.


in this exercise, we look at how to display buttons in line. By default buttons stretch to fill the width of the display. Using the in-line attribute allows buttons to be displayed side-by-side.


in this exercise, we see how you can group buttons together visually to indicate there is a shared functionality between the buttons.  You'll see how to display this vertically or horizontally.  We also added icons and a data theme to the buttons.

Section 7: Forms

In this exercise, we build a basic form with a text input and label. Next we add the placeholder attribute to our text input and hide our label since is no longer necessary.


In this exercise, we look at how to position the label for your field and put to the left for display on tablet devices.


In this exercise, we look at new text field types and how they can trigger different keyboard layouts on the IOS simulator.  We wrapped things up by looking at the new slider input.


In this exercise, will build 3 separate checkboxes. Next we group those checkboxes together. Then we'll turn our checkboxes into radio buttons and then wrap things up by changing the layout from vertical to horizontal.


In this exercise, we look at submitting form data to a server-side script. We submit a name and e-mail address to a PHP form and see what the differences is when using Ajax or a full reload.


In this exercise, we build our first select menu and look at the differences between rendering with the native interface versus the jQuery mobile select UI.  We also cover how to add a placeholder option to our select menu.


In this exercise, we look at how the group multiple select menus together visually.  We also see how to globally set the select menu to render natively or not.  We wrapped things up by looking at how to group items inside of a select menu as well as how to allow multiple selections in the menu.


In this exercise, we see how jQuery mobile will handle very long lists of items for a select. We also look at how to style your select menu using icons, inline display and data themes


In this exercise, we wrap up our lesson on forms by looking at several ways you can style different form elements within the same page.

Section 8: Content Formatting

In this exercise, we look at how you use the grid layout to do 2,3, and 4 column data layout with jQuery Mobile.


In this exercise, we look at how to use collapsable grids to hide and show blocks of content in your app.  We also look at how you can style your collapsable content. We also look at how to create an accordion effect with collapsable bocks to hide and show blocks of content in your app as a group.


In this exercise, we look at how to collapsable list views.

Create responsive tables using jQuery Mobile or enable filtering of columns.
Section 9: Themeroller

ThemeRoller for jQuery mobile was created and makes creating custom theme swatches a snap.  We'll look at the Inspector, color swatches, and Adobe kuler. Next, we'll look at the ways you use the inspector to modify the look of our theme.  Once you are done you can share or download your theme and if you ever need to modify your theme again, you can import it for further editing.

Section 10: Events
238.6 kB

This file contains exercises 37 - 46 and corresponding solutions.


In this exercise,  we begin our exploration of jQuery mobile events.  We start off with looking at the gotchas that can occur when listening for events and performing actions.  In order to see events, we output message to the Web inspector which is built into Safari.  You'll see how to turn on the Web Inspector and output messages to the console using the console.log () JavaScript method.

Our first gotcha is trying to bind to an event prior to the document being ready and how to avoid this.  Second, we look at how to bind events to a page that gets loaded via jQuery's AJAX loading.  Third, we look at how jQuery mobile will load and unload pages from your main document which results in the pageinit event being fired each time navigate to the page.  Fourth, we see that navigating between pages in a single page app, results in the pages not being unloaded and page initialization events are only fired once.

Our final example, we bind to the document instead of a single page div.  We do this to see how the order of our JavaScript does not impact when messages are displayed, but it's based on when the events are dispatched.


In this exercise, we look at how to bind to mouse events in the order in which mouse over, mousedown, mouse up in the click event are dispatched.  Next we look at how to trap the X and Y coordinate of the mouse using the mouse moveevent. We wrapped things up by looking at how mouse events behave inside the IOS simulator.


In this exercise, we look at tap events which are native to mobile devices.  For debugging on your mobile device or IOS simulator you may want to look at WEINRE (WEb INspector REmote), an open source project for debugging. I show you how you can output your console.log() messages using WEINRE.  Next look at the tap and hold event and the swipe, swipe right and swipe left events.


In this exercise,  we look at jQuery Mobile virtual mouse events.  These are best suited for those who are building a jQuery mobile app they'll be consumed on both the desktop and mobile devices. If you're just targeting mobile devices, then you should use the events whenever possible.


In this exercise, we look at device orientation and scrolling events. Since these are specific to mobile devices we will run them in the IOS simulator.


In this exercise,  we look at the page events  being dispatched during the loading process.  These events include page  before loading, loading and load failed.


In this exercise,  we look at the page creation events.  These events include page initialization, before create, create.  We also see how you can cache pages that you navigate to.  This will prevent page creation events from being fired on the pages that are cached.


In this exercise,  we look at the page change events. These events include page before change, change and failed change.  We also look at the data that's being passed in the event along with the page change event.


In this exercise,  we look at the hide and show events  as well as before hide and before show events.


In this exercise,  we look at the entire lifecycle of jQuery mobile events.  This is our wrapup on events to review all the events and what they look like together.

Section 11: Hands on Lab
2.2 MB

This is a 7 part hands on labs.  With each subsection as a separate video.  You are encouraged to code along.

What you'll be building is myWine is a wine tasting app.

Features we will build include

  • List and detail view
  • Load wine varietals
  • Add a new wine
  • Display your wine list
  • Display your wine details
  • Remove individual wines

Required Resources

This hands-on lab requires that you have the following installed:

Apple Safari browser An HTML text editor (i.e Dreamweaver, TextMate, etc) Files for this lab (ZIP file)

The build-it-jquery-mobile.zip file should be expanded on your desktop. This will create a folder named build-it-jquery-mobile containing other files and folders.

Directory Structure

/build-it-jquery-mobile/code/ Contains all code snippets for each lab.

/build-it-jquery-mobile/myWine/ Contains the start and finished files for each lab

351.3 kB

You'll use these files to code along with the Lab.


We'll review the project, required software and details about the lab.  We'll be building the following.

myWine is a wine tasting app.

  • Features we will build today
  • List and detail view
  • Load wine varietals
  • Add a new wine
  • Display your wine list
  • Display your wine details
  • Remove individual wines

In this lab we will

  • Add data-roles
  • Add data-themes
  • Bind to mobileinit to initialize your app and add back button support
  • Insert Add Wine button

You'll add data-roles to the page, header and content divs and listview to the unordered list.


You'll add the data-theme values to the page, header and content divs


You'll initialize your app with back button support


You'll add the data-role “page” to the Add Wine div.


You'll add a list item and add wine button and preview it in your browser.


In this lab 2 we will

  • Create our local database
  • Create our tables
  • Sync the schema
  • Set global variables for each table
  • Turn our developer tools and view local database
For 2-1 we create our database

In this section we define our varietal table


This this section we set your global entity variables, and sync our schema to create our database and tables. 


In lab 3 we will do the following.

  • Review the JSON object structure
  • Add AJAX call with success and error callbacks
  • Parse returned JSON
  • Check if any varietals are in the local database
  • Loop over varietals and add to local database

Making your AJAX call

Use the jQuery ajax method ($.ajax) to call our JSON file located in the root of our project. On success return the data and output to our console. On error, throw an alert dialog.


Use the jQuery method parse JSON to turn our string data into a JSON object. Output the JSON object to our console to see how it differs from the string data. We only want to add the data once, so we’ll query our varietal database table and return the count. We’ll output the results to our console.


Inside your success handler, check the count returned from the database is zero, then loop over the varietals. Output the name of each varietal to the console.


You'll create a new varietal entity, add to the database using persistence.js and then call the flush method to commit the change to the database.


In this final section, you'll add loading message and call a custom dialog window for error message. To force an error, change the URL to varietal2.json, which doesn’t exist and will throw an error.


You'll add a placeholder attribute for the Winery Name input field. Add data-native- menu equal to false on select tags and a data-placeholder attribute for the Choose Rating option


You'll add a load varietal function to query the local database and call the function and pass it the target form select.


You'll query the local database and loop over the results adding the varietals to the select menu.


You'll listen for the pageshow event and clear the form and refresh the select menus.


In this lab you'll do the following 

  • Bind click event to save button
  • Save wine data to local database
  • Refresh wine list with local data
  • Change page to home screen
  • On home screen create, call wine load function

You'' pass the form field values to the saveWine function.


Save the form field values to the local database.


After saving the wine, change to the home screen.


Load the wine list when the home page is shown.


In lab 6, you'll do the following

  • Bind click event to wine list item
  • Load item details from local database
  • Set the wine details for display

In lab 7, you'll do the following

  • Bind swipe event to wine list item
  • Bind click event to delete button
  • Remove wine item from local database
  • Refresh wine list with local data

In this lab, since desktop browsers don’t support ‘swiperight’ event, we’ll substitute ‘mouseenter’


Final section for our lab, you'll add the delete button that when clicked, load that wine and remove it from the database, then hide the wine list item with a slide up animation.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Sidney Maestre, Founder of Crush It Mobile

Sidney Maestre has spent several years building HTML5 and native mobile apps and sharing his knowledge with other developers.

Seeing a lack of meetups dedicated to non-native mobile development, Sidney formed, BAM!, Bay Area Mobile, a meetup focused on jQuery Mobile, Sencha, jQtouch and other non-native mobile technologies.

With the release of jQuery Mobile, Sidney has spent much of 2011 focused on learning and speaking about the technology. This includes speaking at HTML5 DevConf, Adobe MAX and Silicon Valley Code Camp. He is often called up at eBay as an internal expert on the subject. 2011 also saw the beta release of RaffleSwag, for conducting raffles through a mobile phone. Sidney chose jQuery mobile for it's broad support of different platforms and browsers.

Sidney is the former Platform Evangelist with StackMob. StackMob helps mobile developers be more productive by providing cloud based backend services.

Ready to start learning?
Take This Course