JQuery_ Novice to Ninja - Earle Castledine [115]
$('#rating-0').click(function() {
$('#dialog').dialog('open');
});
That’s a nice looking dialog we have there! We can now execute any required code inside the dialog button functions. As part of the code we’ll also have to tell the dialog when we want it to close. If you look back at the button definitions above, you can see we have the line $(this).dialog('close'). As you might suspect, the close command is the opposite of the open command. You can open and close the dialogs as many times as you need.
What else can the plugin do? Well, we’ve specified the option modal to be true; that’s why we have the nice stripey background—but by default, modal will be false, which allows the user to continue working with the rest of the page while the dialog is open. Also, we’ve set resizable to false (and left the draggable option on default—which is true). These options make use of the jQuery UI resizable and draggable behaviors to add some desktop flavor to the dialog.
We specified the dialog’s title text in HTML, but you can also do it in jQuery via the title property, just as you can set its width and height. One less obvious, but extremely useful alternative is the bgiframe option. If this option is set to true, the bgiframe plugin will be used to nfix an issue in Internet Explorer 6 where select boxes show on top of other elements.
In terms of events, you can utilize the dialog’s open, close, and focus events if you need to do some processing unrelated to buttons. But there’s also an extremely useful beforeClose event that occurs when a dialog is asked to close—before it actually does! This is a great place to handle any processes you’d have to do regardless of which button was clicked. It’s also useful if you need to stop the dialog from closing unless certain conditions are satisfied.
By now, you’re starting to appreciate the depth of the jQuery UI library. All of the controls are well thought out and feature-rich. As always, you need to weight the leaner custom option against the more bandwidth-intensive (but quick to implement and more fully featured) jQuery UI alternative. Which one you choose should depend on your project requirements.
Growl-style Notifications
Our client is worried that StarTrackr! is lagging behind competitors in the real-time web space. He wants to be able to communicate with users and keep them abreast of up-to-the-second information: new Twitter posts, news from the RSS feed … anything to show that StarTrackr! is buzzing with life.
The data is no problem—the back-end team can handle it … but how can we notify the user in a way that’s both cool and helpful? Once again we’ll look to the desktop for inspiration, and implement Growl-style notification bubbles (Growl is a popular notification system for the Mac OS X desktop).
When we have a message to share with the users, we’ll add a bubble to the page. The bubble will be located at the bottom right-hand side of the screen. If we have more messages to share, they’ll appear underneath the previous ones, in a kind of upside-down stack. Each bubble will have a close button, enabling users to close them after they’ve been read. The overall effect is shown in Figure 7.10.
Figure 7.10. Growl-style notifications
The real trick to the bubbles is CSS. It takes care of all the tough stuff involved in positioning the dialogs and making them look really cool. In terms of HTML, all we need is a simple container:
chapter_07/19_growl_style_notifications/index.html (excerpt)
It needs to be able to be positioned in the bottom corner to achieve the effect we’re attempting. Placing it in the footer or outside of your page’s main container element is common. Let’s apply some basic CSS to handle the positioning:
chapter_07/19_growl_style_notifications/style.css (excerpt)
#growl {
position: absolute;
bottom: 0;
right: 0;
width: 320px;
z-index: 10;
}
Now that the container is in place, we can start adding our message bubbles to it. We’ll create a simple function that takes a message, wraps it in some structure,