Viewers: in countries Watching now:
Despite the possibilities offered in HTML5, there's still a call for customizable widgets that can be used in websites and web apps. jQuery UI, a popular plugin for jQuery, is here to answer that call. Joe Chellman shows how to install the plugin, use the accordion and date picker widgets, and add behaviors that change how existing page elements respond to user input. Finally, you'll apply the concepts you've learned to a typical project you might see coming from a client—a survey form.
This course is a short companion piece to jQuery for Web Designers. See that course for information about building your core jQuery skill set.
With the advent of HTML5, browsers are enhancing their sets of available user interface widgets. Some of these areas have some overlap with jQuery UI. We're going to take a look at one of those examples in this movie, the Date Picker. So here in Chrome, I've created an input whose type is date. This is a new type in HTML5. And in Chrome it looks like this. It starts out with a placeholder, and then I can open it up and page through the dates, skip around to various years, go back to today and so forth.
I can clear it out with that little x. So it's very handy, and using native widgets like this, if they're available on the platforms that you're developing for is a really good idea. They're going to have better accessibility through the operating system, most likely. And they'll be supported more and more in the future. This is especially the case on many mobile platforms, where they'll offer a highly customized version of this that works in say, a touchscreen environment. The Date Picker is well supported in Chrome. But, if you're working with other browsers, not even just Internet Explorer, you may have a need for a date picker, such as the one that jQuery UI provides.
So we're going to take a quick look at that. Here is another text field. This is just with the type text, with an ID called Date Picker. And if we scroll down, here's a trigger button again. And here is a very similar setup to what we used for the accordion. I'm just selecting and saving that date picker element. And then I'm calling the date picker method on it. So, when I click, nothing apparently happens. But, then when I click the field I get this nice jQuery UI Date Picker. With no options, this is what it looks like. One of the nice things about the jQuery UI widget, is that it's extendable through its options.
You're going to need to choose which one works best for your situation. If you can use the native widget, if it makes sense in the case of the project that you're working on, by all means use them. But if you can't use them, jQuery UI probably has your back.
There are currently no FAQs about jQuery UI Widgets.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.