• Choose a category
• All
• Classic-Fiction

chapter_05/14_jquery_ui_tab_control/script.js (excerpt)

$('#info').tabs().tabs('rotate', 3500);

The first tabs call sets up our tab pane, and the second one instructs jQuery to cycle through the tabs every 3,500 milliseconds (or 3.5 seconds). There’s a lot more you can do with your tabs, so have a look at the documentation to see what’s possible.

The last item we’ll have a look at is selecting a tab programmatically. You can find the currently selected tab by using the selected option:

$('#tabs').tabs('option', 'selected');

Of course, you can also set the current tab. This is handy if you want links in your content to simply change the open tab rather than linking to a new page. For this example, we’ve inserted a link to the About Us page in the content of the first tab. We can hijack that link and have it open the About Us tab instead:

chapter_05/14_jquery_ui_tab_control/script.js (excerpt)

$("#info p a[href=about.html]").click(function() {

$('#info').tabs('select', 1);

return false;

});

Panels and Panes

Panels and panes are nothing more than controls that just hold other controls! When used correctly they help organize a page into logical areas, minimizing complexity for the user. This lets seasoned users take advantage of all your site or application’s features without having your newbies drown in a sea of buttons and widgets. Panels are most effective when they provide contextual tools and controls that users can work with while documents are open or in focus.

Slide-down Login Form

One increasingly popular method of reducing visible clutter is a hidden menu that rests at the very top of the screen. A small button or link reveals to the user that more information is available. Clicking the button causes a panel to slide into view, and moving away from the panel causes it to slide right back.

A convenient and practical space saver for sure, but what kind of information should be stored there? The most popular use for slide-down panels is to display the login fields for the site. Most users know that these features are generally displayed to the top right of a site’s browser window, so a well-placed icon or link will catch the attention of those looking to log in. The login form we’ll create can be seen in Figure 5.8.

Figure 5.8. Slide-down login form

This will be an easy addition to our site, as we already know most of the jQuery commands that will be involved. We’ll throw some quick CSS styles on the control, but, as always, it’s up to you to style it in a way that’s consistent with your site. Then comes the by-now-familiar refrain—hide the form on pageload, then capture the click event to toggle it into and out of sight:

chapter_05/15_login_panel/script.js (excerpt)

$('#login form').hide();

$('#login a').toggle(function() {

$(this)

.addClass('active')

.next('form')

.animate({'height':'show'}, {

duration:'slow',

easing: 'easeOutBounce'

});

}, function() {

$(this)

.removeClass('active')

.next('form')

.slideUp();

});

The only difference between this code and the expandable menu from the beginning of the chapter is that here we’re using a CSS class to control the position of our background image, rather than the jQuery css action. Because these classes are only really used when JavaScript is available (as otherwise we’ll be presenting a control that’s always open), neither solution is necessarily better, and the one you choose will depend more on your preference.

This was a bit too easy, so we’ll finesse it a touch. If our login form were to submit via Ajax (without triggering a page refresh), we’d want the panel to disappear after the form was submitted. Actually, even if we’re loading a new page, having the menu slide up after clicking is a nice flourish:

chapter_05/15_login_panel/script.js (excerpt)

$('#login form :submit').click(function() {

$(this)

.parent()

.prev('a')

.click();

});

We start by capturing the click event on the form’s submit button, and then move back up the DOM tree looking for the containing element. We could just