Need a UI Widget?

Using Widgets

Occasionally you may want to use a widget or two for your projects. I've included the jQueryUI library and created a custom theme that is styled to work with the Explore California site. Below you'll find examples of the Accordion Widget and Tab Widget, the two that I thought it most likely you would want to use. You might also be interested in the Datepicker, especially if you want to show how to provide fallback content for HTML5 datepicker form elements. You can look at the source code for structure or copy and paste the widgets into any page and fill them with your content.

You aren't limited to these two widgets of course. For more information on available widgets, and how to use them, please visit the jQueryUI hompage. As is, the widgets represent the default behavior, but feel free to customize the animation or the CSS any way you wish. If you try to edit the color scheme, keep in mind that the theme is using PNG files for the backgrounds of tabs and headers. Changing them out can be a pain, so if you want to customize those areas either generate another theme, or contact me and I'll help you out.

Accordion

First

You can use any content you want.

You could have pictures of puppies. Or kittens, or perhaps a nice cupcake. You might not use images at all, and prefer to use a table, some text, or maybe a nice Penn & Teller video. It simple doesn't matter. This is a div, put anything in it you want.

However, be careful. H3's are set to be the header sections, so if you need to use one, keep in mind that the default behavior is for it to become another, nested, header. If you REALLY need to use H3's, change the header elements and then pass the change into the widget:

$( ".selector" ).accordion({ header: 'h3' });

For example, if you wanted to change this widget to accept H6 as the new headers you would use this:

$('#accordion').accordion({ header: 'h6' });

Also, I've got this accordion set so that autoHeight is false. That means the panels flex in size based on the content. If you set it to true (which is the default state) then the panels are all the same height, based on the tallest content. If you want same sized panels, do nothing. If you want this behavior (change height based on content), add the following code:

$( "#accordion" ).accordion({ autoHeight: false });

Second

It could be a single line, note how the accordion flexes.

Third

Or you could have crazy cool stuff in here, like this (I think this is where our models broke up):

I'm just not into you

Again feel free to put anything in here.

You don't have any content restrictions like you do with the accordion. The tabs are created by an unordered list at the top, so if you want to add more tabs, just add another div, give it the next id in the series("tabs-1") and then add a corresponding "li" to the menu. Simple!

Some options

Obviously, for more options, check out the jQuery UI page on tabs. Here are a few to get you started:

Setting active tab

This can be done through the use of the disabled option, simply pass an array that leaves out the tab you want enabled,:

$( ".selector" ).tabs({ disabled: [1, 2] });

Or, if you don't feel like passing a whole array, you can simply use selected (which is easier, IMO):

$( ".selector" ).tabs({ selected: 3 });

Changing default event

Want the tab to activate based on mouseover or other event? Easy enough:

$( ".selector" ).tabs({ event: 'mouseover' });

Transition effects

You'll need to read up on them to know which ones you can use, but it's pretty easy to change the tabs to an animated transition if you want:

$( ".selector" ).tabs({ fx: { opacity: 'toggle' } });

Oh yeah,

If you change the CSS for these, be careful. The CSS theme is specially customized to work with the other Explore California stylesheet...so it's really easy to cause specificity issues. This will only effect the widgets, as their CSS is segregated, but it can still cause headaches.