jQuery UI In Depth

Hands-on guide for learning the user interface interactions, widgets, effects, utilities and themes that make jQuery UI
4.5 (21 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,496 students enrolled
40% off
Take This Course
  • Lectures 52
  • Length 10.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 7/2013 English

Course Description

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.

What are the requirements?

  • NotePad++
  • Web Browser

What am I going to get from this course?

  • 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

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

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: Setting the stage
6 pages
This is the presentation that provides a quick introduction to the course.

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.

This lecture discusses the downloads, themes, and resources available on the jQuery UI web site.
Here we will discuss what tools are available out there to build jQuery UI applications, and which one will be used in this course.
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!

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.

Section 2: Widgets
9 pages
These are the slides to accompany the Accordion discussion.
This lecture discusses the key points on the slides.
This example enforces the concepts learned in the accordion discussion.
8 pages
These slides summarize the key points in the button widget.
In this lecture, we discuss the key points in the slides and explain the options, methods and events available for the button widget.
This exercise implements the features discussed in the slides.
7 pages
The slides highlight the otpions, methods and events for the menu.
This lecture will explore the key points on the menu slides.
This example put the menu features (options, methods and events) to use.
7 pages
This lecture will highlight the key features of the slider widget.
In this lecture, we will explore the options, methods and events of the silder widget.
This example applies the features we have dicussed in the slider discussion.
7 pages
These slides highlight the progressbar features.
Here, we will discuss the slides and see what the progressbar has to offer.
This example will apply the knowledge gained from the progressbar discussion.
7 pages
The slides will summarize the key features of the tooltip widget.
In this discussion we will discover the tooltip's options, methods, and events.
In this lecture, we will walk through an example to use the tooltip features.
6 pages
These slides will summarize the tab's options, methods, and events.
This lecture will explore the available functionality in the tab widget.
We will walk through an example to show off the tab's functionality.
7 pages
These slides detail the spinner options, methods and events.
This lecture will elaborate on the spinner's options, methods and events.
This lecture will put the spinner options, methods and events in action.
6 pages
These slides sum up the autocomplete features.
This discussion will cover the details of the autocomplete widget.
This exercise will implement some of the features discussed in the presentation.
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.
6 pages
These slides summarize the options, events, and methods of the datepicker widget.
This leture discusses the options, methods, and events of the datepicker widget.
In this example, we will apply the options, methods, and events of the datepicker widget.
8 pages
This lecture will highlight the key points of the dialog widget.
In this discussion we will explore the details of the dialog and see the available options, methods, and events.
In this lecture, we will apply the knowledge gained from the dialog discussion in an exercise.
Section 3: Effects
jquery UI supports adding CSS classes to UI widgets. We will experiment with this in the exercise.
jQuery UI includes the jQuery Color plugins which provides color animations. This will be the subject of this exercise.
This lecture covers the animation effect supported by jQuery UI.
In this lecture, we will experiment with adding and removing class(es) to elements while animating style changes.
Section 4: Interactions
jQuery UI has a powerful feature that supports dragging elements on the screen. We will experiment with this feature in this example.
This section will illustrate the use of jQuery UI droppable interaction.
This exercise will enforce the concept of dragging and dropping elements on the screen.
This lecture will illustrate how to add functionality to be able to resize elements using a mouse.
With this exercise, we will see how to be able to select elements individually and in groups.
This lecture will clarify how to reorder elements in a list or grid using the mouse.
Section 5: Utilities
Here, we will experiment with how to position elements with repect to parent windows and other elements.
Section 6: Conclusion
This lecture is a quick wrap-up of what we have covered in this course.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ayad Boudiab, 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 http://www.mrbool.com.

Ready to start learning?
Take This Course