A jQuery plugin that sets a div to allow application of a CSS theme to your site. If you find this plugin useful please vote for it on the jQuery site.
This page provides a documentation reference for working with the plugin v1.2.0. See a demonstration of the themes plugin and download the code from there. Or see a minimal page that you can use as a basis for your own investigations.
Customise each targetted div with the settings below (all are optional):
$('selected div').themes({themes: ['cupertino', 'smoothness']});
| Name | Type | Default | Comments |
|---|---|---|---|
| themes | string[] | [] | List the IDs of the themes to include. If none are specified, all are shown. For example: $('selected div').themes(
{themes: ['cupertino', 'smoothness']}); |
| icons | URL | 'img/themes.gif' | The location of the icons for the standard themes. This image is a horizontal amalgamation of all the individual icons. |
| iconSize | int[2] | [23,20] | The pixel size of the individual icons in the image above. |
| previews | URL | 'img/themes-preview.gif' | The location of the previews for the standard themes. This image is a horizontal amalgamation of all the individual previews. |
| previewSize | int[2] | [90,80] | The pixel size of the individual previews in the image above. |
| showPreviews | boolean | true | Set to true to display the previews in a popup panel when hovering over the corresponding theme icon/text. When false, no previews are shown. |
| compact | boolean | true | Set to true to display the themes in a compact format using only the icons. When false, the icon and display name are shown in separate 'buttons'. |
Set global values that apply to all theme instances:
$.themes.setDefaults({cookieExpiry: 30});
| Name | Type | Default | Comments |
|---|---|---|---|
| themeBase | string | '' | Any common path that should prefix the location of the CSS files. |
| defaultTheme | string | '' | The ID of the default theme to use when the page is first loaded. If not specified, or if it does not exist, the first theme in the defined set is used. |
| cookieExpiry | number or Date | 0 | The expiry date for the cookie that stores the user's theme selection. If a number, this is the number of days from today. Use the default of 0 if the cookie expires at the end of the user's session. |
| cookiePath | string | '/' | The path within the site to which the theme cookie applies. The default indicates the entire site. |
| cookieDomain | string | '' | The domain to which the theme cookie applies. |
| onSelect | function | null | A callback function that is triggered when a theme is selected.
The theme ID, display name, and URL are passed as parameters.
Within the function this refers to the window. |
| Signature | Returns | Comments |
|---|---|---|
| $.themes.init(settings) | Themes object | Initialise the page by loading the current theme, either from a cookie
set on a previous visit or from the defaultTheme setting.
This should be called before applying the themeing functionality
to any divisions on the page.
The optional settings parameter lets you establish
default settings (see above) to use with all theme instances,
as well as during the initialisation process itself. |
| $.themes.setDefaults(settings) | Themes object | Update the default instance settings (see above) to use with all theme instances. |
| $.themes.addTheme(id, display, icon, preview, url) | Themes object | Add a definition for a new theme (or overwrite an existing one).
The parameters are: id (string) the identifier for this theme,
display (string) the display text for this theme,
icon (URL) the location of an icon for this theme
(with dimensions iconSize)
or (int) the index into the icons image (starting at zero),
preview (URL) the location of a preview for this theme
(with dimensions previewSize)
or (int) the index into the previews image (starting at zero),
url (URL) the URL of the CSS for this theme.For example: |
| $.themes.getThemes() | object[] | Return details about all the known themes. The array is indexed by the theme ID (string).
Each object in the array has the following attributes:
display, icon, preview,
url as described in addTheme.For example: |
| $(div).themes('change', settings) | jQuery object | Update the settings (see above) for the themes instance attached to the given div(s). |
| $(div).themes('destroy') | jQuery object | Remove the themes functionality from the given div(s). |
Contact Keith Wood at kbwood{at}iinet.com.au with comments or suggestions.