jlThemeSwitcher For jQuery

Posted on August 1, 2010 by

jlThemeSwitcher is a jQuery theme switcher plugin which allows you to switch between jQuery UI themes or your own custom themes created with jQuery UI Themeroller. If you’re looking for a stylesheet changer which is not designed specifically for jQuery UI themes, try jlStyleSheet instead of this plugin.

You can try jlThemeSwitcher on this page. You can also download the source-code by following the download link below.

Download: Git The Source Code Notice: If you use an earlier version than 2.0.0, please be aware that the coding has changed significantly and some options are now depreciated. See the changelog below.

Changelog:

  • 2.0.3 – 1.21.11 -Version 2.0.3 adds the boolean noHeader option, which removes the header portion of the jlThemeSwitcher widget when set to true. Default is false.
  • 2.0.2 – 1.18.11 -Version 2.0.2 fixes various and sundry bugs. Made backwards compatible with IE7. Fixes bug that caused it to crash if there was no defaultTheme set.
  • 2.0.1 – 9.21.10 -Fixed bug in default cookie options and updated documentation. Cookie options is an object not string.
  • 2.0.0 – 8.9.10 – Major recode. Removed the following options – fixedPosition, height, left, toggle, top. Added the following options – closeIcon, zindex. Positioning should now be accomplished with css. Removed the function toggle_jlThemeSwitcher(). Added the class .jlthemeswitcher-toggle to replace the toggle function.
  • 1.0.2 – 8.2.10 – Minor bug fix
  • 1.0.1 – 8.1.10 – Minor bug fix
  • 1.0.0 – 8.1.10 – Initial release

Example Use:

<!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 type="text/javascript" src="jquery.jlthemeswitcher.js"></script>
<script>
jQuery(function(){
$('#themeswitcher').jlthemeswitcher({
defaultTheme: 'Black Tie',
excludeThemes: 'UI Lightness,UI Darkness,Start'
autoOpen: true
});
});
</script>
</head>
<body>

<div id="themeswitcher"></div>

</body>
</html>

Call jlthemeswitcher() on any object to embed the widget. There are 3 classes .jlthemeswitcher-opener, .jlthemeswitcher-closer, and .jlthemeswitcher-toggle which can be used to toggle the widget visibility using a button or link, or use the autoOpen option instead.

<a href="javascript:void(0)" class="jlthemeswitcher-opener">Open The Widget</a>
<input type="button" class="jlthemeswitcher-closer" value="Close The Widget" />
<a href="javascript:void(0)" class="jlthemeswitcher-toggle">Toggle</a>


Available Options:

The Theme Switcher Widget has the following options available for customizing the widget. As of version 2.0.0, widget positioning can be accomplished by applying css styles to whatever object the widget is embedded or by editing the css class .jlthemeswitcher-container.

Name Type Default
autoOpen Boolean Default: false
Automatically opens the widget when the page loads.
bgClass String Default: ui-widget-content
The class name for the background style of the widget.
closeIcon Boolean Default: true
Toggles the visibility of the close button located in the widget header.
closeOnClick Boolean Default: true
Closes the widget when a theme is selected.
cookieName String Default: ‘jlthemeswitcher-theme’
The name of the cookie that the widget will set for your domain. Once a theme has been loaded, it will be remembered on future loads.
cookieOptions Object Default: {expires:365}
The options for the cookie that the widget will set for your domain. Uses the same syntax as the jQuery cookies plugin.
defaultTheme String Default: null
Loads a default theme as soon as the widget loads. String must match the name of a theme in the themes list.
excludeThemes String Default: null
A comma-separated list of theme names to exclude from the widget.
hoverText Boolean Default: false
Hides the theme name captions for the themes list until the mouse is over each item.
importThemes Boolean Default: true
Imports all of the publicly available themes for jlThemeSwitcher from JasonLau.biz. All jQuery UI themes are included. Set to false if you wish to use your own custom themes which were created with jQuery UI ThemeRoller.
importThemesPath String Default: http://jasonlau.biz/public/themes.run
The URL to the JSON formatted themes list.
joinThemes Boolean Default: true
Combines your custom themes list with the public imported themes list.
noHeader Boolean Default: false
Toggles the visibility of the widget header.
onClose Function Default: null
Callback function to be executed whenever the switcher menu closes.
onOpen Function Default: null
Callback function to be executed whenever the switcher menu opens.
onSelect Function Default: null
Callback function to be executed whenever a theme is selected.
openAtOpener Boolean Default: false
When set to true the widget will open at the same top and left position as the object with the class jlthemeswitcher-opener.
themeItemWidth Number Default: 82
The width of each theme item in the list in pixels.
themePreview Boolean Default: true
Switches the webpage theme to the one which is currently in mouseover hover state to provide a quick preview. The previously selected theme reloads when the mouse exits the list item.
themes String Default: Imported public themes.
The list of themes the widget will use. Requires the following format – 
{String:Theme Name,String:Thumbnail URL,String:Stylesheet URL|String:Theme Name,String:Thumbnail URL,String:Stylesheet URL}

Example:

themes:'{UI Lightness,http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_light.png,http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css|UI Darkness,http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_dark.png,http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css}'
title String Default: Theme Switcher
The widget title. Remove the title altogether by using this option with a blank value like this –
title: ''
width String Default: 300px
The default width of the theme switcher widget in string form so you can use % or px format.
zindex Number Default: 2147483647 (The maximum allowable z-index value)
The default z-index stacking order for the widget.

Posted in jQuery | 4 Comments »
Tagged: , , , , , , , , , , , , , , , , ,

  • fabrice

    Just “Bravo”

  • DarkSide

    You have some bug in IE7 in this peace of software.

    1. line 121 ‘display’:'inline-block’.
    Inline-block don’t work in IE7, so you better replace it with ‘display’:'block’,'float’:'left’

    2. line 181 $(‘.jlthemeswitcher a:hover img’).css({…
    :hover selector don’t work in IE7, so I just commented these 4 lines, but probably there are better solution.

    3. line 306 var pos = $(‘div.jlthemeswitcher’).find(‘li:contains(‘+ $.cookie(options.cookieName) +’)').offset().left
    If option defaultTheme is not set and also cookie is not set, then in IE7 it throws error because can’t find any such LI element and it’s not possible to get .left attribute of null. Similar problems are in many other lines of code too.

  • Jason

    Thanks for the bug(s) report. I’ll be recoding this plugin soon. I will try to be more aware of backwards browser compatibility in the next version.

  • Jason

    There’s a new version available. Not a complete rewrite, but it is backwards compatible with IE7 now.