Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add jQuery UI In Depth to your Wishlist.

Add to Wishlist

jQuery UI In Depth

Hands-on guide for learning the user interface interactions, widgets, effects, utilities and themes that make jQuery UI
4.5 (20 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,499 students enrolled
Created by Ayad Boudiab
Last updated 7/2013
$10 $25 60% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 9 hours on-demand video
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

This course will provide an in-depth coverage of all the details of jQuery UI. It follows a hands-on approach where the instructor will cover the subjects one at a time using examples. By the time a specific session is done, the student will feel comfortable using the subject covered. Along the way, different tools for developing and debugging jQuery UI code will be discussed. By taking this course, the student will feel very confident creating complex and elegant graphical user interfaces using jQuery UI.

Who is the target audience?
  • People interested in learning a JavaScript library to create complex Graphical User Interfaces
  • Students looking to complement their jQuery experience with UI experience
  • Developers looking for simple ways to debug their jQuery UI code
Students Who Viewed This Course Also Viewed
What Will I Learn?
Introduce the audience to jQuery UI
Cover all the jQuery UI widgets
Discuss the jQuery UI interactions (drag, drop, sort...)
Learn to apply the jQuery UI effects
Discuss positioning UI widgets
Present different tools for developing jQuery UI applications
Introduce the tools needed to debug jQuery UI code
View Curriculum
  • NotePad++
  • Web Browser
Curriculum For This Course
Expand All 52 Lectures Collapse All 52 Lectures 10:17:12
Setting the stage
6 Lectures 01:02:39
This is the presentation that provides a quick introduction to the course.
Introduction slides
6 pages

In this introductory video, I will give you a birds-eye view of what to expect in this course. In addition to the tools and utilities that you need while developing jQuery UI applications.

Introduction discussion

This lecture discusses the downloads, themes, and resources available on the jQuery UI web site.
Environment Setup

Here we will discuss what tools are available out there to build jQuery UI applications, and which one will be used in this course.
Developer Toos

This lecture will introduce the tool you need to step through the code one line at a time and find out where the bugs are!
Debugging tools

This lecture will introduce two web sites that can be used for testing and experimenting with different ideas before adding the final code to the mainstream  development.

An idea testing lab
34 Lectures 05:41:50
These are the slides to accompany the Accordion discussion.
Accordion slides
9 pages

This lecture discusses the key points on the slides.
Accordion discussion

This example enforces the concepts learned in the accordion discussion.
Accordion example

These slides summarize the key points in the button widget.
Button slides
8 pages

In this lecture, we discuss the key points in the slides and explain the options, methods and events available for the button widget.
Button discussion

This exercise implements the features discussed in the slides.
Button example

The slides highlight the otpions, methods and events for the menu.
Menu slides
7 pages

This lecture will explore the key points on the menu slides.
Menu discussion

This example put the menu features (options, methods and events) to use.
Preview 14:30

This lecture will highlight the key features of the slider widget.
Slider slides
7 pages

In this lecture, we will explore the options, methods and events of the silder widget.
Slider discussion

This example applies the features we have dicussed in the slider discussion.
Slider example

These slides highlight the progressbar features.
Progressbar slides
7 pages

Here, we will discuss the slides and see what the progressbar has to offer.
Progressbar discussion

This example will apply the knowledge gained from the progressbar discussion.
Progressbar example

The slides will summarize the key features of the tooltip widget.
Tooltip slides
7 pages

In this discussion we will discover the tooltip's options, methods, and events.
Tooltip discussion

In this lecture, we will walk through an example to use the tooltip features.
Tooltip example

These slides will summarize the tab's options, methods, and events.
Tabs slides
6 pages

This lecture will explore the available functionality in the tab widget.
Tabs discussion

We will walk through an example to show off the tab's functionality.
Tabs example

These slides detail the spinner options, methods and events.
Spinner slides
7 pages

This lecture will elaborate on the spinner's options, methods and events.
Spinner discussion

This lecture will put the spinner options, methods and events in action.
Spinner example

These slides sum up the autocomplete features.
Autocomplete slides
6 pages

This discussion will cover the details of the autocomplete widget.
Autocomplete discussion

This exercise will implement some of the features discussed in the presentation.
Autocomplete example

This exercise will enforce the autocomplete options, methods and events. In addition, it will explain how to use autocomplete with data available on a remote server.
Autocomplete example with remote data

These slides summarize the options, events, and methods of the datepicker widget.
Datepicker slides
6 pages

This leture discusses the options, methods, and events of the datepicker widget.
Datepicker discussion

In this example, we will apply the options, methods, and events of the datepicker widget.
Datepicker example

This lecture will highlight the key points of the dialog widget.
Dialog slides
8 pages

In this discussion we will explore the details of the dialog and see the available options, methods, and events.
Dialog discussion

In this lecture, we will apply the knowledge gained from the dialog discussion in an exercise.
Dialog example
4 Lectures 29:16
jquery UI supports adding CSS classes to UI widgets. We will experiment with this in the exercise.
Add class effect

jQuery UI includes the jQuery Color plugins which provides color animations. This will be the subject of this exercise.
Color animation effect

This lecture covers the animation effect supported by jQuery UI.
Animation effect

In this lecture, we will experiment with adding and removing class(es) to elements while animating style changes.
Switch class effect
6 Lectures 01:22:07
jQuery UI has a powerful feature that supports dragging elements on the screen. We will experiment with this feature in this example.
Draggable elements

This section will illustrate the use of jQuery UI droppable interaction.
Droppable elements

This exercise will enforce the concept of dragging and dropping elements on the screen.
More on droppable elements

This lecture will illustrate how to add functionality to be able to resize elements using a mouse.
Resizable elements

With this exercise, we will see how to be able to select elements individually and in groups.
Selectable elements

This lecture will clarify how to reorder elements in a list or grid using the mouse.
Sortable elements
1 Lecture 15:55
Here, we will experiment with how to position elements with repect to parent windows and other elements.
Positioning elements
1 Lecture 01:25
This lecture is a quick wrap-up of what we have covered in this course.
Final Notes
About the Instructor
4.4 Average rating
138 Reviews
5,581 Students
3 Courses
Senior Application Developer / Technical Trainer

 I am a Senior Application Developer with a degree in Computer Science from Georgia State University. I have about 15 years in programming experience and 14 years in teaching experience. I mostly work on Microsoft based technologies such as C#, ASP.NET, and SQL Server. I taught programming courses (Java, C#, SQL...) at the continuing education department in Georgia Perimeter College. I also taught a course online with Stark State College in Ohio. In addition to my full time developer position with a company in Alpharetta/GA, I am also a part time technical trainer with DevMedia/Brazil. I create training videos (such as jQuery, jQuery UI, JavaScript, Kendo UI, ASP.NET, and SQL Server) for their portal site

Report Abuse