Learn your way! Get started

jQuery UI Using HTML5

with expert James Curtis


Watch trailer


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 9/20/2012
Level Intermediate
Runtime 2h 31m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

Learn how to increase the interactivity in your web applications with jQueryUI. Here you will learn about how to use jQuery effectively whether it is for simple form manipulation or building a library of custom widgets. Make your next project shine with jQuery UI.

Prerequisites

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

Learning Paths

This course will help you prepare for the following certifications and exams:
MCSD: SharePoint Applications
MCSD: Web Applications
70-480: Programming in HTML5 with JavaScript and CSS3

This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks

Meet the expert

James Curtis is a .NET Developer that primarily works in the UX space. He has worked on and for several large projects alongside Microsoft Consulting. James has spoken at several code camps about UX development for ASP.NET and SharePoint. He is an active participant in the development community tweeting and blogging about several topics in the UX area. James is an active consultant and is also assisting in several Start-ups contributing his UX experience.

Course outline



Getting Started

Getting Started (08:43)
  • Introduction (00:46)
  • What is jQueryUI (00:16)
  • Main Features of jQueryUI (00:15)
  • Demo: Intro to jQueryUI (07:14)
  • Summary (00:09)
Draggable and Droppable (14:38)
  • Introduction (00:31)
  • Interactions: Draggable (00:37)
  • Demo: Draggable (07:10)
  • Interactions: Droppable (00:45)
  • Demo: Droppable (05:20)
  • Summary (00:12)
Resize, Select, and Sort (16:37)
  • Introduction (00:34)
  • Interactions: Resizable (04:59)
  • Demo: Resizeable (00:12)
  • Interactions: Selectable (00:16)
  • Demo: Selectable (04:49)
  • Interactions: Sortable (00:39)
  • Demo: Sortable (04:52)
  • Summary (00:13)
Accordion, AutoButton (16:29)
  • Introduction (00:34)
  • Widget: Accordion (00:49)
  • Demo: Accordion widget (03:39)
  • Widget: Autocomplete (00:34)
  • Demo: Autocomplete (04:15)
  • Widget: Button widget (03:45)
  • Widget: Datepicker (00:31)
  • Demo: Datepicker widget (02:02)
  • Summary (00:14)

Tabs, Position, Widgets

ProgressBar, Sliders, Tabs (19:05)
  • Introduction (00:34)
  • Widgets: Dialog (00:31)
  • Demo: Dialog widget (04:43)
  • Widget: Progressbar (00:29)
  • Demo: Progressbar (03:33)
  • Widget: Slider (00:30)
  • Demo: Slider (03:53)
  • Widgets: Tabs (00:39)
  • Demo: Tabs widget (03:55)
  • Summary (00:13)
Position (09:49)
  • Introduction (00:25)
  • Utilities: Position (00:32)
  • Demo: Position Utility (03:57)
  • Demo: More Position (02:45)
  • Demo: Settings (01:58)
  • Summary (00:09)
Widgets (16:42)
  • Introduction (00:27)
  • Utilities: Widget (00:34)
  • Demo: Widget Utility (04:47)
  • Demo: Refresh Function (05:07)
  • Demo: Options (03:44)
  • Demo: Widgets in Action (01:50)
  • Summary (00:10)

Effect Show

Effects Show (13:54)
  • Introduction (00:27)
  • Effects: Basic Effect (00:16)
  • Demo: Basic Effects (06:42)
  • Effects: Visibility: Show (00:31)
  • Demo: Visibility: Show (05:44)
  • Summary (00:12)
Hide, Toggle, Animate (13:57)
  • Introduction (00:25)
  • Effects: Visibility: Hide (00:28)
  • Demo: Visibility: Hide (02:42)
  • Effects: Visibility: Toggle (00:26)
  • Demo: Visibility: Toggle (03:53)
  • Effects: Color: Animate (00:24)
  • Demo: Color: Animate (05:23)
  • Summary (00:12)
Add/Remove,Toggle, Easing (21:47)
  • Introduction (00:31)
  • Effects: Class: addClass (00:32)
  • Demo: Class: addClass (03:34)
  • Effects: Class: removeClass (00:32)
  • Demo: Class: removeClass (01:59)
  • Effects: Class: toggleClass (00:29)
  • Demo: Class: toggleClass (03:21)
  • Effects: Class: switchClass (00:23)
  • Demo: Class: switchClass (04:00)
  • Easing (00:20)
  • Demo: Easing (05:47)
  • Summary (00:13)