The jQuery UI Theme Switcher Widget is jQuery’s drop-menu-type jQuery UI theme selector which allows you to switch from one jQuery UI Gallery theme to another. You can download the source code or view the documentation below. If you’re looking for something different, you can try my theme switcher or my stylesheet changer.
Download jQuery UI Theme Switcher Widget: Download
Note: This version contains a bug fix I added which is not available in the original version. This fixes a cookie bug.
Theme Switcher Widget Documentation:
Using the jQuery UI CSS Framework, you can easily add the theme switcher widget to your page by adding a script tag referencing the plugin and call themeswitcher(); on any element to which you’d like to append the widget.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script>
$(document).ready(function(){
$('#switcher').themeswitcher();
});
</script>
</head>
<body>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
</body>
</html>
Available Options:
The Theme Switcher Widget has the following options available for customizing the widget.
| 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. | ||