jQuery Mobile
Interactive

jQuery Mobile

LearnNow Online
Updated Aug 23, 2018

Course description

jQuery Mobile is a framework for building mobile web applications. Unlike other frameworks it builds upon the web skills that you already have making it easier to learn and use. jQuery Mobile adheres to web standards which allows your site to be compatible with nearly every mobile device. In this course you will learn how to use jQuery Mobile to create your own mobile websites, how to give your site a unique appearance using the ThemeRoller, and we will show you debugging techniques to ensure that your site is deployed problem free.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.


Prerequisites

This course assumes that the users have a basic knowledge of web programming with JavaScript, HTML and CSS. Knowledge of Java or other web-based programming languages is not required.


Meet the expert

Troy Miles

Troy Miles has been a designer and developer of software since 1979. Troy began his career writing games in assembly and C. Since then, he has written code in C , C#, Objective-C, Java, JavaScript, and even a smidgen of Python. He is a Microsoft Certified Solution Developer and has won a developer challenge at a local Microsoft Windows Phone Unleashed event. Troy's passion has been mobile and mobile web development. He joined the mobile development team at Kelley Blue Book. His small team is responsible for the KBB.com application for iPhone, Android, and Windows Phone 7 and the mobile versions of KBB.com. Troy also spends time talking to developer groups and maintaining his blog.

Video Runtime

143 Minutes

Time to complete

254 Minutes

Course Outline

Introduction thru Framework

Introduction to jQuery Mobile (14:16)

  • Introduction (00:30)
  • What is a Mobile Web App (00:59)
  • What is jQuery Mobile (00:16)
  • Web Apps vs. Device Apps (01:22)
  • Other Mobile Web Frameworks (00:28)
  • JavaScript Tips (00:26)
  • Demo: JavaScript NameSpace (01:53)
  • Required Plug-ins (00:13)
  • Demo: Download jQuery (01:31)
  • First Look (00:21)
  • Demo: Hello jQuery Mobile App (03:35)
  • HTML5 Semantic Markup (01:06)
  • Demo: HTML5 (01:23)
  • Summary (00:06)

Page Navigation (11:28)

  • Introduction (00:24)
  • Page Navigation (02:13)
  • Demo: Page Navigation (02:06)
  • Demo: Change Link to Dialog (01:23)
  • Demo: Page Caching (00:42)
  • Page Transitions (00:48)
  • Demo: Page Transitions (03:01)
  • Demo: Run in Simulator (00:36)
  • Summary (00:11)

Events (07:19)

  • Introduction (00:28)
  • Events (00:50)
  • Scroll Events (00:13)
  • Touch Events (00:47)
  • Page Events (00:45)
  • Page Initialization (00:43)
  • Page Load (00:46)
  • Page Change (00:35)
  • Page Transition (00:36)
  • Three Types of Buttons (00:26)
  • Demo: Buttons (00:53)
  • Summary (00:10)

Form Elements (07:31)

  • Introduction (00:28)
  • Form Elements (widgets) (00:49)
  • Demo: Form Elements (02:01)
  • Layout Grid (00:42)
  • Two-column (00:16)
  • Three-column (00:16)
  • Four-column (00:16)
  • Five-column (00:21)
  • Demo: Layout Grid (02:04)
  • Summary (00:14)

Themes (05:56)

  • Introduction (00:26)
  • Themes (00:25)
  • The Default Theme (00:10)
  • Swatch Themes (00:24)
  • The Theme Roller (00:18)
  • Demo: Theme Roller (02:25)
  • Demo: Adding Themes (01:37)
  • Summary (00:08)

API (04:13)

  • Introduction (00:24)
  • API (01:53)
  • Demo: API Methods (01:41)
  • Summary (00:13)

Application Framework (21:51)

  • Introduction (00:32)
  • Application Framework (00:53)
  • JavaScript Details (01:02)
  • Demo: Application Framework (03:33)
  • Demo: More App Framework (04:55)
  • Demo: Safety Check (03:44)
  • Demo: JS Immediate Function (05:09)
  • Demo: Running The Program (01:46)
  • Summary (00:13)
List thru History and Tips

List (19:01)

  • Introduction (00:29)
  • List (00:37)
  • Basic Linked List (00:28)
  • Nested Lists (00:40)
  • Read-only List (00:22)
  • Numbered List (00:22)
  • Count Bubbles (00:26)
  • Split Button List (00:35)
  • Icons (00:31)
  • Thumbnails (00:20)
  • Dividers (00:10)
  • Formatting Classes (00:39)
  • Demo: Creating Lists (03:11)
  • Demo: Numbered Lists (02:36)
  • Demo: Thumbnails (03:54)
  • Demo: Formatted List (02:09)
  • Demo: Nested List (01:13)
  • Summary (00:10)

AJAX and Template Engines (17:43)

  • Introduction (00:29)
  • Ajax Guidelines (01:13)
  • JSONP (00:47)
  • JavaScript Template Engines (00:20)
  • Demo: Template Markup (04:50)
  • Demo: Getting Data (04:25)
  • Demo: Time Ago Property (05:24)
  • Summary (00:11)

Responsive Design (11:37)

  • Introduction (00:32)
  • Responsive Design (00:31)
  • Phone vs. Tablets (00:16)
  • Media Queries Types (00:46)
  • Media Queries (01:01)
  • Demo: Media Queries (03:43)
  • Demo: Change Method (04:37)
  • Summary (00:07)

History (04:00)

  • Introduction (00:42)
  • History (01:08)
  • Demo: History (01:54)
  • Summary (00:15)

Tips from the Trenches (18:10)

  • Introduction (00:42)
  • Tips from the Trenches (00:37)
  • Gotchas! (02:13)
  • Demo: Unique ID Problem (04:52)
  • Demo: Not Resetting (01:50)
  • Debugging (00:15)
  • Analogs (00:55)
  • Fiddler (00:28)
  • Proxies (00:47)
  • Opera Mobile Emulator (00:51)
  • Demo: Fiddler (01:49)
  • Demo: Opera Mobile Emulator (02:35)
  • Summary (00:11)
;