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 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
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>
<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>
<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.
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. |
Tags: change, css, download, javascript, jQuery, options, plugin, swap, switch, switcher, theme, themeswitcher, tool, ui, widget
This entry was posted
on Saturday, July 31st, 2010 at 7:35 am and is filed under jQuery.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.