jQuery UI Development
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.
66 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

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.
66 students enrolled
Created by Packt Publishing
Last updated 1/2015
English
Current price: $10 Original price: $85 Discount: 88% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
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.
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.

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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 36 Lectures Collapse All 36 Lectures 02:05:30
+
Getting Started with jQuery UI
7 Lectures 25:05

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

Getting Started with jQuery UI
01:05

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

An Overview of jQuery
05:07

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.

An Overview of jQuery UI
04:56

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

Working with jQuery Locally or through a CDN
04:10

An overview of your options when downloading jQuery UI.

Choosing Our Delivery Options in jQuery UI
03:19

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

Creating Our First Page Using jQuery UI Widgets
05:00

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

What Tools Am I Using?
01:28
+
Working with the CSS Framework
7 Lectures 21:58

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

All about CSS
01:17

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

Adding Our Second Widget
04:11

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.

Switching Styles in jQuery UI
02:59

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

The Library Minification Functionality
04:27

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

Optimizing Your Project
02:54

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?

Themes - Under the Hood
03:57

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

Creating Your Own Themes Using ThemeRoller
02:13
+
Working with Widgets
7 Lectures 27:56

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

Setting up Expectations
01:21

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

Creating a Dialog Widget
06:17

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

Options, Methods, and Events
02:44

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

Working with Widget Options
04:48

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

Changing a Dialog's Title
02:10

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.

Discovering the Widget's Methods
05:32

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.

Adding Interactivity with Callbacks
05:04
+
Adding Interaction
7 Lectures 21:24

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

Setting up Expectations
00:58

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

Integrating Events into Widgets
04:41

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.

Updating the Site When a Widget is Dropped
02:33

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.

Being More Efficient with Events
04:33

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.

Digging into Event Properties: the ui Property
02:16

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.

Exploring the Event Object
04:39

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

Cleaning up Our Project
01:44
+
More about Widgets
7 Lectures 27:14

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

Preview 01:12

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.

Preview 03:01

Learn about spinners and how to work with them.

Preview 03:07

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

Preview 03:30

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

Preview 08:15

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

Preview 03:20

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

Preview 04:49
+
Course Recap
1 Lecture 01:53

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

Overview
01:53
About the Instructor
Packt Publishing
3.9 Average rating
5,146 Reviews
40,500 Students
408 Courses
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.