You can learn anything on Udemy. Start today with one of our 10,000+ online courses

Learning jQuery Mobile for Beginners

This jQuery Mobile Tutorial will help you start designing mobile experiences with HTML, JavaScript, and CSS.
21 reviews
TAUGHT BY
  • 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.

WHAT'S INSIDE
  • Lifetime access to 84 lectures
  • 6+ hours of high quality content
  • A community of 900+ students learning together!
SHARE

Learning jQuery Mobile for Beginners

This jQuery Mobile Tutorial will help you start designing mobile experiences with HTML, JavaScript, and CSS.
21 reviews

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.

    • 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
    • Over 84 lectures and 6.5 hours of content!
    • Background and Software Requirements
    • Getting Started
    • Data Roles and Themes
    • Navigating and Transitions
    • Lists
    • Buttons
    • Forms
    • Content Formatting
    • Themeroller
    • Events
    • 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.

CURRICULUM

  • SECTION 1:
    Background and Software Requirements
  • 1
    Background and Software Requirements
    06:50

    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.

  • 2
    Background and Software Requirements PDF
    13 slides

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

  • SECTION 2:
    Getting Started
  • 3
    Exercise 1.1
    06:57

    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.

  • 4
    Exercise 1.2
    02:10

    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.

  • 5
    Exercise 1.3
    02:30

    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
  • 6
    Exercise 2.1
    06:37

    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.

  • 7
    Exercise 2.2
    06:13

    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.

  • 8
    Exercise 2.3
    02:17
    In exercise 2.3, you get your first look at data-themes.
  • 9
    CSS Injection - Demystifying jQuery Mobile
    03:54
    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
  • 10
    Exercise 3.1
    02:59

    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.

  • 11
    Exercise 3.2
    03:45

    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.

  • 12
    Link Hijacking and AJAX
    03:08
  • 13
    Exercise 3.3
    03:52

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

  • 14
    Exercise 3.4
    05:43

    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.

  • 15
    Exercise 3.5
    05:09

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

  • 16
    Exercise 3.6
    04:50
    In this exercise, we'll look at how the back button works with jQuery Mobile
  • SECTION 5:
    Lists
  • 17
    Exercise 4.1
    03:40

    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.

  • 18
    Exercise 4.2
    04:16

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

  • 19
    Exercise 4.3
    04:02

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

  • 20
    Exercise 4.4
    05:40

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

  • 21
    Exercise 4.5
    03:48

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

  • 22
    Exercise 4.6
    05:44

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

  • 23
    Exercise 4.7
    05:09

    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
  • 24
    Exercies 5.1
    04:18

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

  • 25
    Exercise 5.2
    03:14

    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

  • 26
    Exercise 5.3
    03:47

    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.

  • 27
    Exercise 5.4
    02:35

    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.

  • 28
    Exercise 5.5
    03:05

    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
  • 29
    Exercise 6.1
    03:06

    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.

  • 30
    Exercise 6.2
    03:18

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

  • 31
    Exercise 6.3
    09:35

    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.

  • 32
    Exercise 6.4
    05:51

    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.

  • 33
    Exercise 6.5
    06:28

    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.

  • 34
    Exercise 6.6
    10:55

    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.

  • 35
    Exercise 6.7
    07:15

    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.

  • 36
    Exercise 6.8
    03:44

    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

  • 37
    Exercise 6.9
    04:21

    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
  • 38
    Exercise 7.1
    05:20

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

  • 39
    Exercise 7.2
    06:35

    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.

  • 40
    Exercise 7.3
    03:57

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

  • 41
    Exercise 7.4
    05:43
    Create responsive tables using jQuery Mobile or enable filtering of columns.
  • SECTION 9:
    Themeroller
  • 42
    Themeroller
    14:30

    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
  • 43
    Events - Exercises and Solutions
    233.02 KB

    This file contains exercises 37 - 46 and corresponding solutions.

  • 44
    Exercise 37
    20:52

    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.

  • 45
    Exercise 38
    06:57

    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.

  • 46
    Exercise 39
    07:03

    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.

  • 47
    Exercise 40
    03:32

    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.

  • 48
    Exercise 41
    03:45

    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.

  • 49
    Exercise 42
    07:34

    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.

  • 50
    Exercise 43
    08:24

    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.

  • 51
    Exercise 44
    07:35

    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.

  • 52
    Exercise 45
    07:37

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

  • 53
    Exercise 46
    01:48

    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
  • 54
    Handson Lab jQuery Mobile For Beginners
    2.07 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

  • 55
    Assets for Hands on Lab for jQuery Mobile
    343.1 KB

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

  • 56
    Hands on Lab - Introduction
    04:41

    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
  • 57
    Welcome to Lab 1
    03:05

    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
  • 58
    Lab 1-1
    01:23

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

  • 59
    Lab 1-2
    01:18

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

  • 60
    Lab 1-3
    01:04

    You'll initialize your app with back button support

  • 61
    lab 1-4
    00:44

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

  • 62
    lab 1-5
    02:40

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

  • 63
    Lab 2-1
    02:51

    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
  • 64
    Lab 2-2
    01:24

    In this section we define our varietal table

  • 65
    Lab 2-3 & 4
    03:00

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

  • 66
    Lab 3 Introduction
    01:30

    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
  • 67
    Lab 3-1
    03:14

    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.

  • 68
    Lab 3-2
    02:52

    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.

  • 69
    Lab 3-3
    02:55

    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.

  • 70
    Lab 3-4
    03:29

    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.

  • 71
    Lab 3-5
    03:55

    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.

  • 72
    Lab 4-1
    03:32

    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

  • 73
    Lab 4-2
    03:25

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

  • 74
    Lab 4-3
    04:37

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

  • 75
    Lab 4-4
    04:05

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

  • 76
    Lab 5-1
    03:23

    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
  • 77
    Lab 5-2
    01:28

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

  • 78
    Lab 5-3
    03:16

    Save the form field values to the local database.

  • 79
    Lab 5-4
    08:32

    After saving the wine, change to the home screen.

  • 80
    Lab 5-5
    02:05

    Load the wine list when the home page is shown.

  • 81
    Lab 6-1
    07:07

    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
  • 82
    Lab 7-1
    07:46

    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
  • 83
    Lab 7-2
    01:04

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

  • 84
    Lab 7-3
    03:52

    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.

RATING

  • 17
  • 4
  • 0
  • 0
  • 0
AVERAGE RATING
NUMBER OF RATINGS
21

REVIEWS

  • Yayoi Moriguchi
    Good course

    Step by step and easy to follow. I learned a lot.

  • Nathan Cheshire
    Informative and easy to follow

    I found this to be highly useful. Some of it I haven't needed yet, but I'm grateful to have this as a resource to consult later. The explanations and example were very useful. For the record I did use this as springboard for developing a simple mobile app.

  • Syd Brat
    overall course materials are good

    overall course materials are good and easy to follow.

  • Stone River eLearning
    Great Course!

    This course is easy to understand and well laid out. Great for JQuery beginners.

  • Marko Raspor
    Good introduction to jQuery mobile

    So, I took this course hoping to learn some basic stuff related to jQuery mobile. I can honestly say I learned a lot and more. The course introduced me not only to jQuery mobile, but to jQuery and some other javascript SDKs. I would definitely recommend this course to anyone wanting to dive into jQuery mobile. Though, html knowledge is a big plus. Why this is 4 and not 5 star review is that there are still some spelling errors in the files and the lecturer could try to explain the "advanced" code he uses in final 10 lessons a bit more (at least maybe point the user to a webpage or some other resource). Overall, very happy I took this jQuery mobile course!

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion