Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:10Length:50 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Introduction to jQuery UI

In this lesson, you’ll get a quick tour of the jQuery UI website. I’ll show you where to find all the information you need to make the most of the framework and this course.

Related Links

1.2 Introduction to jQuery UI

Hello, and welcome back. In this lesson I want to introduce jQuery UI to those of you who may not have used it before, and let me start off by saying that jQuery UI is an extension of jQuery. You can find the jQuery website at jQuery.com. And this particular course assumes that you already have some familiarity with jQuery, we're not gonna get into the basics of using jQuery. But if you go to jQuery.com there is a big download link there if you want to download that source code. We're actually going to be using codepen.io for all of our code in this course, so we're going to be pointing to jQuery through the CDN. But that's the jQuery website. Second of all I want to point out the jQuery UI website, which you can get to by going to jQueryUI.com. Obviously the UI stands for user interface, and the jQuery UI extension is a set of user interface items that are already styled for you, already have some extra functionality that you can't just get in HTML. And over here on the left you can see all of the different items that are available to you and we're gonna be going through the form specific items in this particular course. So we're gonna be looking at things like buttons and we're gonna look at the progress bar, we're going to look at the date picker. So we're gonna look at a few different items here, and if you want to get more information on any of these items you would just click on it in this left menu. For date picker for example, we would click on that and it would take us to a page where we could test that out. We can click in here and we see the date picker pop up, we can cycle through the months etc etc. Then where the real magic happens is down here at the bottom. We have this link to view the source which will just expand out this little window, where you can see what the HTML looks like and the JavaScript that's used to activate that particular item. And then then if you want more information, because this is just the very basics here, if you want more information on that particular item you can click on this API documentation link at the very bottom. This will give you all of the options methods and events associated with that particular item. So we can scroll down and read more information about not only how to use the item itself but how to customize it and how we can apply different options that might not be obvious to us. Now sometimes when you use jQuery UI by itself, the items that you're using might not look very good, but if we come down here to the theming section, once we get to the jQuery UI web page and this is the API documentation section. If you click on theming you'll see that there is a CSS framework that's tied in with it as well and we'll take a look at that, and we're actually gonna be using a CDN link for those themes as we move forward in our course. So now that we know where to find more information on jQuery, let's just jump over to Code Pen. And this is the website we're gonna be using to build our code out. So we can enter in our HTML, CSS and JavaScript here. But I just want to take a quick look at the settings before we move forward. So if we click on settings and go to the JavaScript tab, we have jQuery and jQuery UI included here. You need to make sure that you include jQuery first and then include jQuery UI after that. And if you're using CodePen, if you're setting this up by yourself you'll notice that both of those items are quick add items, so we can click on this drop down here, if we don't already have them selected over here and you'll notice there are options for jQuery and jQuery UI. Now one thing that Code Pen does not have built in is something for the jQuery UI CSS framework, and you can see the link down here and you can copy that link from any of the Code Pens that we're using throughout this course. But this is pulled straight from jQuery's website. It's a jQuery UI CSS theme and you'll notice that this folder right here is called base. This is the base theme, but there are multiple other themes that we could use here and I think that's the reason they didn't include this CSS framework in codepen.ui because there are so many different themes that you could choose from. So there's really only a few options down here, none of them are related to jQuery UI. So those are the basic options we're going to be using. We're not going to be touching the settings again for the rest of this course, so I just wanted to point those out to you. So those are the basics of where you can find more information on jQuery and jQuery UI. Thank you so much for watching, and I'll see you in the next lesson.

Back to the top