JQuery_ Novice to Ninja - Earle Castledine [148]
Making Your Components Themeable
ThemeRoller may have a groovy-sounding name, and the results you gain from it may be fairly impressive—but all it’s really doing is generating a block of CSS classes that can be used to style any set of DOM elements. If you build your own custom UI components in a way that follows the jQuery UI’s markup and naming conventions, they’ll be also be skinnable.
In Figure 9.3 we’ve applied the appropriate CSS classes to the bouncy content panes from Chapter 3, so now we have a very jQuery UI-like component. The default themes (or our custom ThemeRoller themes) can be included at the top of our page, and our chameleon widget will instantly have a new look and feel (the figure shows the UI lightness, Dot Luv, and Eggplant predesigned themes in action).
Figure 9.3. ThemeRolled content panes
If you’re accustomed to building semantically correct structures, you’ll probably only need to add a class here and there to access all of the ThemeRoller goodness. The themes assume your widget will have at least a containing element that it can use as the base for styling. Our original HTML for the biography panes looked like this:
Beau Dandy
Glendatronix is the queen of …
Mr Speaker
After smashing into the limelight …
…
To start off, we’ll designate the #bio div as the container by applying the ui-widget class. Then we’ll reset any styles we may have already applied that might mess up the widget styling, by adding ui-helper-reset:
chapter_09/17_themable_components/index.html (excerpt)
This already gives us a lot: the fonts and colors of the current theme. Next, we can start to work additional classes into our component to style the heading and content areas:
chapter_09/17_themable_components/index.html (excerpt)
Johnny Stardust
After smashing into the limelight …
The ui-widget-header gives us the shiny toolbar look, and the ui-corner-all will make the widget nice and round (where supported, of course). You can specify ui-corner-all or the more specific classes that style individual edges—such as the ui-corner-tl for the top-left edge or ui-corner-bottom for both bottom edges, to achieve rounded corners on most elements.
We’ve also added the dramatic “SOLD OUT!” message to our panes using some additional classes that display as warnings and icons:
chapter_09/17_themable_components/index.html (excerpt)
SOLD OUT!
The ui-state-error class gives the strong error-looking messages, and the ui-icon-alert adds a small icon to the span.
As you’d expect from witnessing the jQuery UI library in full flight, there are a lot more options available for controlling how your code is styled by the ThemeRoller themes. There are classes for defining interaction states of buttons, disabled form elements, component shadows, and some great helper classes for z-index fixes (for Internet Explorer 6), as well as shortcut links for accessibility. The documentation is quite detailed and will give you a good grounding for most of your widgets.
The best way to get your head around everything that’s available is to read over the documentation, see what elements are affected in the ThemeRoller tool, and inspect the classes applied to elements in the jQuery UI library. Also, remember that when you’re making