• Choose a category
• All
• Classic-Fiction

// Later, when a location is clicked...

var currentData = $(clickedLocation).data('pin_data');

// We can retrieve the metadata stored on the object!

alert("You selected the location: " + currentData.name);

});

Although in many cases we’d probably want to store the element reference in the object itself, when the objects are coming from third-party code, you have to be very careful with adding or removing properties. As well, since any changes the third party makes in the future could affect your code, it’s best to play it safe. The data action lets us augment the object without changing it.

Theme Rolling

Throughout the preceding pages we’ve traversed and conquered much of the jQuery UI API. One of the most attractive features of jQuery UI is … its attractiveness! Out of the box the UI components look great—and (as much as we might hate to admit it) looking great is incredibly important. Sometimes it can be even more important than the functionality itself! There’s nothing worse than showing a colleague or boss a technically brilliant proof of concept for a control you’ve created, only to be met with criticism about its design. Worse still, sometimes your lack of initial thought regarding skinning and theming results in a product that’s inherently difficult to style.

This is not a problem for jQuery UI components; there’s a gallery of themes available—and picking or customizing a new funky design is simple, thanks to the ThemeRoller web application. ThemeRoller lets you tweak, design, and download jQuery UI themes. Additionally, if you follow some simple conventions when creating your own controls, you can easily take advantage of existing and customized themes to ensure everything you create looks as awesome as it works.

Using Gallery Themes

We’ve mentioned themes on a few occasions on our jQuery UI expedition—it’s one of the options we had to specify when we downloaded the library. By default you receive the UI lightness theme, but we’ve also made use of the Sunny theme, and perhaps you’ve had a look at a couple more as you went along. To see what default themes you can use, head over to the ThemeRoller site.

Now click the Gallery tab in the left sidebar. Here you can view various predesigned themes and find one that fits your needs. Then if you hit the download button, you’ll be taken to the familiar jQuery UI build screen. If you need the whole library, customize the components you want. The theme you choose will be preselected in the theme drop-down box.

If, on the other hand, you just wanted the theme, don’t worry about which components are selected and just download the library. The bundled files will include your theme, so just copy the css folder out of the download and into your project. Then update the theme name in the style sheet link inside your page, so that your components will look for the correct CSS file. That’s all there is to it.

Rolling Your Own

Chances are the default themes may prove unsuitable for your site. Thankfully the ThemeRoller tool is here to make customizing the available themes a breeze. ThemeRoller is a web application that provides a simple interface to modify every aspect of a jQuery UI theme. As you update properties in the sidebar, the changes are instantly reflected in the preview area, as illustrated in Figure 9.2.

Figure 9.2. The jQuery UI ThemeRoller

Once you’ve tweaked your theme to perfection, you can download it by hitting the Download theme button. The changes are passed over to the jQuery UI download builder, just like a regular gallery theme—except that the theme drop-down box will now say “Custom Theme.” If you were to download the bundle now your theme would be called custom-theme (so your CSS files would be stored in the custom-theme folder). If you feel your creation demands a more fitting title, drop down the Advanced Theme Settings panel and update the Theme Folder Name input box.

Note: Limited IE6 Support

Although ThemeRoller themes are incredibly nice-looking and easy to use, there