jQuery UI In Depth
4.5 (22 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,526 students enrolled
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 (22 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,526 students enrolled
Created by Ayad Boudiab
Last updated 7/2013
English
Curiosity Sale
Current price: $10 Original price: $25 Discount: 60% off
30-Day Money-Back Guarantee
Includes:
  • 9 hours on-demand video
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
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
Requirements
  • NotePad++
  • Web Browser
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.

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
Curriculum For This Course
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
11:08

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

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
08:17

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
07:57

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
11:29
+
Widgets
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
14:16

This example enforces the concepts learned in the accordion discussion.
Accordion example
32:17

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
09:18

This exercise implements the features discussed in the slides.
Button example
18:48

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
13:47

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
11:00

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

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
10:22

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

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
10:38

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

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
11:34

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

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
09:08

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

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

This discussion will cover the details of the autocomplete widget.
Autocomplete discussion
10:30

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

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
11:50

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
09:01

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

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
11:36

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

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

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

In this lecture, we will experiment with adding and removing class(es) to elements while animating style changes.
Switch class effect
05:44
+
Interactions
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
15:07

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

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

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

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

This lecture will clarify how to reorder elements in a list or grid using the mouse.
Sortable elements
11:43
+
Utilities
1 Lecture 15:55
Here, we will experiment with how to position elements with repect to parent windows and other elements.
Positioning elements
15:55
+
Conclusion
1 Lecture 01:25
This lecture is a quick wrap-up of what we have covered in this course.
Final Notes
01:25
About the Instructor
Ayad Boudiab
4.3 Average rating
182 Reviews
6,281 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 http://www.mrbool.com.