Join Joe Chellman for an in-depth discussion in this video Solution: Upgrade the contact form, part of jQuery UI Widgets.
- View Offline
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.…
This course is a short companion piece to jQuery for Web Designers. See that course for information about building your core jQuery skill set.