jQuery UI In Depth

Name: jQuery UI In Depth
Rating: 4.3 (41 reviews)

Hands-on guide for learning the user interface interactions, widgets, effects, utilities and themes that make jQuery UI

Created byAyad Boudiab

Last updated 7/2013

English

What you'll 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

Course content

6 sections • 52 lectures • 10h 17m total length

Introduction slides6:00
This is the presentation that provides a quick introduction to the course.
Introduction discussion11:08
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.
Environment Setup23:48
This lecture discusses the downloads, themes, and resources available on the jQuery UI web site.
Developer Toos8:17
Here we will discuss what tools are available out there to build jQuery UI applications, and which one will be used in this course.
Debugging tools7:57
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!
An idea testing lab11:29
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.

Accordion slides9:00
These are the slides to accompany the Accordion discussion.
Accordion discussion14:16
This lecture discusses the key points on the slides.
Accordion example32:17
This example enforces the concepts learned in the accordion discussion.
Button slides8:00
These slides summarize the key points in the button widget.
Button discussion9:18
In this lecture, we discuss the key points in the slides and explain the options, methods and events available for the button widget.
Button example18:48
This exercise implements the features discussed in the slides.
Menu slides7:00
The slides highlight the otpions, methods and events for the menu.
Menu discussion13:47
This lecture will explore the key points on the menu slides.
Menu example14:30
This example put the menu features (options, methods and events) to use.
Slider slides7:00
This lecture will highlight the key features of the slider widget.
Slider discussion11:00
In this lecture, we will explore the options, methods and events of the silder widget.
Slider example15:40
This example applies the features we have dicussed in the slider discussion.
Progressbar slides7:00
These slides highlight the progressbar features.
Progressbar discussion10:22
Here, we will discuss the slides and see what the progressbar has to offer.
Progressbar example15:21
This example will apply the knowledge gained from the progressbar discussion.
Tooltip slides7:00
The slides will summarize the key features of the tooltip widget.
Tooltip discussion10:38
In this discussion we will discover the tooltip's options, methods, and events.
Tooltip example15:52
In this lecture, we will walk through an example to use the tooltip features.
Tabs slides6:00
These slides will summarize the tab's options, methods, and events.
Tabs discussion11:34
This lecture will explore the available functionality in the tab widget.
Tabs example10:34
We will walk through an example to show off the tab's functionality.
Spinner slides7:00
These slides detail the spinner options, methods and events.
Spinner discussion9:08
This lecture will elaborate on the spinner's options, methods and events.
Spinner example13:10
This lecture will put the spinner options, methods and events in action.
Autocomplete slides6:00
These slides sum up the autocomplete features.
Autocomplete discussion10:30
This discussion will cover the details of the autocomplete widget.
Autocomplete example18:17
This exercise will implement some of the features discussed in the presentation.
Autocomplete example with remote data11:50
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.
Datepicker slides6:00
These slides summarize the options, events, and methods of the datepicker widget.
Datepicker discussion9:01
This leture discusses the options, methods, and events of the datepicker widget.
Datepicker example30:54
In this example, we will apply the options, methods, and events of the datepicker widget.
Dialog slides8:00
This lecture will highlight the key points of the dialog widget.
Dialog discussion11:36
In this discussion we will explore the details of the dialog and see the available options, methods, and events.
Dialog example23:27
In this lecture, we will apply the knowledge gained from the dialog discussion in an exercise.

Add class effect10:18
jquery UI supports adding CSS classes to UI widgets. We will experiment with this in the exercise.
Color animation effect5:37
jQuery UI includes the jQuery Color plugins which provides color animations. This will be the subject of this exercise.
Animation effect7:37
This lecture covers the animation effect supported by jQuery UI.
Switch class effect5:44
In this lecture, we will experiment with adding and removing class(es) to elements while animating style changes.

Draggable elements15:07
jQuery UI has a powerful feature that supports dragging elements on the screen. We will experiment with this feature in this example.
Droppable elements16:08
This section will illustrate the use of jQuery UI droppable interaction.
More on droppable elements14:15
This exercise will enforce the concept of dragging and dropping elements on the screen.
Resizable elements9:06
This lecture will illustrate how to add functionality to be able to resize elements using a mouse.
Selectable elements15:48
With this exercise, we will see how to be able to select elements individually and in groups.
Sortable elements11:43
This lecture will clarify how to reorder elements in a list or grid using the mouse.

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 this course is for:

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

jQuery UI In Depth

What you'll learn

Explore related topics

Course content

Setting the stage6 lectures • 1hr 9min

Widgets34 lectures • 7hr

Effects4 lectures • 29min

Interactions6 lectures • 1hr 22min

Utilities1 lecture • 16min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: