jQuery UI Development

Tips and tricks to master the jQuery UI library and set up your own custom widgets and cool components
4.0 (1 rating)
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.
61 students enrolled
82% off
Take This Course
  • Lectures 36
  • Length 2 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 1/2015 English

Course Description

jQuery UI training is made easy in this video, with step-by-step examples, useful tips, and quick tricks. This course breaks down complex tasks into bite-sized chunks, making it the best resource for you to use if you want to start using jQuery UI. Learn how to save hundreds of hours in development using jQuery UI's awesome components.

Even in the HTML 5 world of today, there are many oft used components and functionalities that still aren't part of a browser out of the box; this library is the critical solution, which will save you hundreds of hours while building highly sophisticated components for your applications. We'll cover the basics, and then build our first component – the datePicker - and we'll customize its characteristics. We'll discuss the ThemeRoller application for quickly skinning components, and the dialog component in all its detail. You'll also learn how to discover component features on your own, how to listen in on variables and changes, as well as how to trigger and listen to events. We'll then kick it up a notch with jQuery UI's drag-and-drop capabilities and build a working example that uses all of these features. We'll use components effectively, examine event properties in detail, and even clean up our code to make it more presentable. We'll wrap up by demonstrating as many of jQuery UI's essential and popular components as we can, followed by a brief course recap and summary.

About the Author

Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards. Among Ben's publications are Packt’s HTML5 Graphing and Data Visualization Cookbook.

What are the requirements?

  • A working knowledge of JavaScript and a familiarity with jQuery would be useful, but are not vital.
  • jQuery UI training is made easy, with step-by-step examples, useful tips, and quick tricks. This course breaks down complex tasks into bite-sized chunks, making it your quickest resource to jump-start your journey with jQuery UI. Learn how to save hundreds of hours in development using jQuery UI's awesome components.

What am I going to get from this course?

  • Set up a custom jQuery UI library
  • Minify your library and make it more efficient
  • Get to grips with components and how to skin them quickly
  • Use the ThemeRoller to create custom themes in a jiffy
  • Understand how events work in jQuery UI
  • Hands-on demonstrations with detailed explanations and code
  • Drag-and-drop elements using the jQuery UI features
  • Work with over 9 key components

Who is the target audience?

  • If you want to save hundreds of hours on building your own components, this video course is ideal for you. We will demonstrate how to easily design elegant and powerful front-end interfaces for web applications.

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: Getting Started with jQuery UI

A brief description of what jQuery is, what jQuery UI is, and how you'll find them useful.


An overview of the importance of JavaScript libraries, and how they can make life easier.


As a developer, many times you don't want to reinvent the box to common things. jQuery UI mainly focuses on trying to quickly create common solutions for developers who mainly need visual components.


There are advantages for hosted and nonhosted solutions, and which is better?


An overview of your options when downloading jQuery UI.


In this video we will create our first jQuery UI web page elements.


A quick overview of the tools that I'm working with to develop in this course.

Section 2: Working with the CSS Framework

Overview of what are we going to learn in this section, as well as CSS.


Why are there JavaScript libraries and what main problems do these libraries help to solve.


As a developer, you wouldn't want to reinvent the wheel for a common functionality. jQuery UI's main utility is to quickly create common solutions for developers, mainly for visual components.


There are advantages for hosted and nonhosted solutions, so which one is better?


After downloading the optimized files for our project, it's now time for us to integrate it into our working sample files.


It’s nice to be able to select a theme that was created in the past, but wouldn't it be nicer to know how the themes work so you can create your own themes?


In this last part of our CSS overview, we will learn how to create our own custom themes.

Section 3: Working with Widgets

In this video we'll take a bird's-eye view of this session's topics.


In this video we will learn how to work with our third widget, a dialog, and add our first custom attribute.


In this video we take a bird's-eye view of the basic ways to engage with a jQuery UI widget.


In this video we will dive right into the options of widgets and see how to customize their features.


In this section we will continue working with options, and this time we will dynamically override the title of the dialog widget.


It is truly nice to customize and make the widgets look like you want them to look, but many times you will want to control them not because you're a control freak but because you need to control them. Jump in; let's start controlling widgets.


In this video we will understand the differences between callbacks and events. By the end of this video, we will have two complete live examples of working callbacks.

Section 4: Adding Interaction

An overview of the topics we'll discuss and the sample project that we'll build by the end of this session.


Now that we know how to create callbacks, its time for us to learn how to work with events.


In the previous video we discussed about how to interact with the user when he drags the widget. In this video we will continue by adding a drop event.


Now that we know how events work, it's time to understand how to be efficient with them. In this video we will explore how to make our events smarter.


In this video, we continue exploring events and wrap up the topic by exploring the event properties as we do a quick integration of everything we learned so far in our sample project.


We continue further and dig into understanding how to create functions that don't refer externally to the actual component that they're calling using the event's target property.


Let's clean up our project with one last adjustment to reset the page's state once the widget has been dropped.

Section 5: More about Widgets

An overview of what topics we'll cover in this section.


Wouldn't you want your site to look better with information displayed for users as they progress using your site? Well you can very easily do that with tooltips.


Learn about spinners and how to work with them.


Expanding on our experience, we are now ready to create a more advanced widget, a menu.


In this video we will go over what you need to create your own sliders.


In this video we will go over what you need to create your own Accordion.


Tabs are one of the most popular features of jQuery UI, and in this video we'll discuss how to set up your own.

Section 6: Course Recap

A brief conclusion of what topics we've covered, and where you can find more information.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course