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.
This challenge for jQuery UI came in three parts. First, to convert these elements into an Accordion, to add a Date Picker, and to make these check boxes sortable. Let's take a look at my solution. So, here is the Accordion. Works fine. And this is the Date Picker. Now as you can see, we have a minimum date. You can select anything that's tomorrow or later. And then here, under General Information, I can check the tours that I like. And I can also drag them to the top, put them in the order that I think interests me. And then submit it.
No extra processing, but I can do it right here. Let's see how this is implemented. So first of all we need to see the Markup. Here is the Opening Form tag. Now what I've done is I've added a wrapper DIV around everything here. JQuery UI's Accordion widget requires a container on which you're going to instantiate the accordion. And then you just need some element that will serve as the Header, followed by another container for whatever the content is. In this case, the form was already using Field Set tags, so I just kept those. But I added a Header beforehand.
The tricky thing about this is that it was built with the Legend tag on the inside. Which is the sensible part of a field set for accessibility purposes. But when we turn this into an accordion, it doesn't make sense so much because we end up seeing this twice. So I added some CSS to the top here to make sure that that would not show up, when in the context I would instantiated jQuery UI Accordian widget. Looking at the browser, I'll show you how that works. Inspect this, and you can see, after jQuery UI is instantiated, it adds a ton of classes to all these different elements. This isn't here before jQuery UI is instantiated.
We didn't want all this extra stuff. So, I set the Height Style option to Content. You can see this on the Accordion API page. This option tells jQuery UI, don't try to make everything the same size, just make each pane as big as its content. And then here, I'm instantiating the Date Picker. The Min Date option is the right one to set a minimum date. You can set it to a hard-coded date, like this. You can also use Offsets. The example they give in the API is yesterday, where you can pass in negative one.
I want it tomorrow, so instead I used one. If you want it today you could use zero, if you want it next week you could use a seven. There are a variety of date formats that this Min Date option will accept, the easiest one for tomorrow I think, is just one. And then finally on this Check Box Preference group, which is the ID that surrounds all these check boxes right here. I just enabled Sortable and additionally chained on the Disabled Selection so we don't end up with accidental extra text selection.
And so the result is a nice Accordion with the sortable options and my Date Picker.
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.