In mojoPortal content management system we use jQueryUI for things like tabs, accordion, and datepicker, and the style of these widgets is controlled by the jQuery UI theme.
There are quite a few standard themes to pick from and you are able to create your own using the jQuery UI Theme Roller. However if you make a custom theme then you would have to host the files locally, since only the standard themes are available from the Google CDN (Content Delivery Network).
By default we load both the jQuery and jQueryUI javascript as well as the jQuery UI theme CSS from the Google CDN. You could host the CSS locally but still load the javascript from the CDN or you could host all of it locally. The main thing is the the version for the javascript needs to be the same as the version for the CSS because things do change over time.
Since the standard jQuery UI CSS is available from the CDN, they are the easiest to use and you may find that by trying each one you can find a theme that works well with your design. mojoPortal make this as easy as setting a property on the StyleSheetCombiner control in the layout.master file of the skin.
If you look in the layout.master file for most of the skins that ship with mojoPortal we have this information in comments so that you know what the valid jQuery UI theme names are.
<%-- JQueryUIThemeName valid options are:
base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks,
humanity, le-frog, mint-choc, overcast, pepper-grinder,
redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader
--%>
<portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" IncludejQueryUI="true" JQueryUIThemeName="redmond" />
Note that if you host the CSS locally you could combine it with the rest of the CSS for your skin and then you would set IncludejQueryUI to false on the StyleSheetCombiner
Related Articles
Last Updated 2011-07-09 by Joe Audette