|
« Back to jQuery UI Theming
Theme Switcher Widget
If you have a demo page using the jQuery UI CSS Framework, you can easily add our theme switcher widget to your page to show off a variety of themes. This is also very useful for development as it can reveal areas where your CSS is not quite flexible enough to be fully themeable using our framework.
To put a Theme Switcher Widget on any page, simply add a script tag referencing our plugin and call themeswitcher(); on any element to which you'd like to append the widget. Here's a code sample:
Theme Switcher Widget
$('#switcher').themeswitcher();
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script>
$(document).ready(function(){
$('#switcher').themeswitcher();
});
</script>
</head>
<body style="font-size:62.5%;">
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
</body>
</html>
Available Options
The Theme Switcher Widget has several options available for customizing the widget to work best on your page.
Options:
| Name | Type | Default |
|---|
| loadTheme |
String |
Default: null |
|
Load a theme as soon as the switcher loads. String must match the name of a theme in the switcher menu.
|
| height |
Number |
Default: 200 |
|
Sets the height of the switcher menu.
|
| width |
Number |
Default: 150 |
|
Sets the width of the switcher menu.
|
| initialText |
String |
Default: 'Switch Theme' |
|
Sets the initial text in the widget button before a theme has been chosen.
|
| buttonPreText |
String |
Default: 'Theme: ' |
|
Sets the text in the widget button that precedes the theme name when a theme is chosen.
|
| closeOnSelect |
Boolean |
Default: true |
|
Close the switcher menu when a theme is selected.
|
| buttonHeight |
Number |
Default: 14 |
|
Height of switcher button.
|
| cookieName |
String |
Default: 'jquery-ui-theme' |
|
The name of the cookie that the switcher will set for your domain. Once a theme has been selected, it will be remembered on future loads.
|
| onOpen |
Function |
Default: null |
|
Callback function to be executed whenever the switcher menu opens.
|
| onClose |
Function |
Default: null |
|
Callback function to be executed whenever the switcher menu closes.
|
| onSelect |
Function |
Default: null |
|
Callback function to be executed whenever a theme is selected.
|
|