jQuery ThemeSwitcherTool – Working Version!!!!!

I recently tried to install the jQuery UI  ThemeSwitcher on a site for a project on which I am working. It failed. Miserably! I scoured the interwebs for a working version, but could not find one anywhere. However, I did find out why the tool was not working. It seems the jQuery team disabled hotlinking to its servers. This was extremely good news, as it meant I could simply recode the widget to point to the new files or download them and point the script to the downloaded files. I dove right in to the code and made some modifications to the start of the script. Then I optimized some of the rest of the code. Finally, I added a few extra options to cover the changes I made.

Download

You can click on the following links to download the files.

  • themeswitchertool.js – The themeswitcher.
  • The Following files are images used by themeswitcher. To use them, place them in /javascripts/jquery/themeswitcher/ or use the imageLocation option to point to the directory where these are stored.

Changes

  • The old script appended up to three styles to the document, then removed the first one. It now uses the selector “head link#ui-theme” to change the stylesheet. I changed this so you can set the id of your default custom theme to “ui-theme” and it will change this. If the id isn’t found, it creates a new one.
  • Added new options for specifying your own themes to add to the list.
  • Added new option, useStandard, for specifying whether to use the themes from the jQuery UI site.
  • Added new options for specifying where to find the UI icons and stylesheets
  • Added new option, imageLocation, for specifying where to find the widget images (found in the downloaded file)
  • Added the widget images to the downloaded file, so you don’t have to link to jQuery’s servers
  • Added option, useCookie, for whether to use a cookie for saving the theme for later use on the same page.

Examples

Basic usage, no custom theme support

  1. $(‘<div id="theme-switcher"></div>’).prependTo(‘body’).themeswitchertool( );

Adding custom themes

  1. $(‘<div id="theme-switcher"></div>’).prependTo(‘body’).themeswitchertool( {
  2.     themes: {
  3.        ‘theme1′: {
  4.            icon:"/path/to/theme-icon.png",
  5.            css:"/path/to/theme.css"
  6.        },
  7.        ‘theme2′: {
  8.            icon:"/path/to/theme2-icon.png",
  9.            css:"/path/to/theme2.css"
  10.        }
  11.     }
  12. });

Using Only Custom Themes

  1. $(‘<div id="theme-switcher"></div>’).prependTo(‘body’).themeswitchertool( {
  2.     useStandard: false,
  3.     themes: {
  4.        ‘theme1′: {
  5.            icon:"/path/to/theme-icon.png",
  6.            css:"/path/to/theme.css"
  7.        },
  8.        ‘theme2′: {
  9.            icon:"/path/to/theme2-icon.png",
  10.            css:"/path/to/theme2.css"
  11.        }
  12.     }
  13. });

New Options

themes
Default: {}
A hash of themes, where each key is the theme name, and the value is another hash specifying the icon to use and the css file for the theme. Here is an example:

  1. {
  2.   ‘theme1′: {
  3.     icon:"/path/to/theme-icon.png",
  4.     css:"/path/to/theme.css"
  5.   }
  6. }
useStandard
Default: true
If you don’t want the themes from the jQuery UI site to show up in the list, set this to false.
useCookie
Default: true
The Theme Switcher uses a browser cookie to store and retrieve the theme name for the current site. Set this option to false if you do not want your site to remember the theme.
imageLocation
Default: “/javascripts/jquery/themeswitcher/”
This is where the images are stored which Theme Switcher uses. The following files must be in the folder: buttonbg.png, icon_color_arrow.gif, menuhoverbg.png . You can get these from the download.
imgPrefix
Default: “http://static.jquery.com/ui/themeroller/images/themeGallery/theme_90_”
This option specifies the default icon prefix URI. The icons are the previews for each theme. The default option sets the default images to the jquery hotlink site. This may change in the future, so it is specified here as an option.
imgSuffix
Default: “.png”
This option specifies the rest of the image URI.
cssPrefix
Default: “http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/”
This option specifies the deafault css location prefix.
cssSuffix
Default: “/jquery-ui.css”
This option specifies the deafault css location sufffix.

5 Responses to “jQuery ThemeSwitcherTool – Working Version!!!!!”

  1. TheTester says:

    Your code is missing the closing “” tag in the place where you concatenate “” for each theme. This breaks your version of themeswitcher in IE7 and IE8.

  2. TheTester says:

    Hmm. It stripped the tags.

    to be read
    the closing a tag in the place where you concatenate li

  3. jason robertson says:

    Tried it out $(‘’).prependTo(‘body’).themeswitchertool( );
    This line appears to be incorrect, there is no method themeswitchertool() there of course is a themeswitcher() method , I am relatively new to jQuery. and I only spent 15 minutes on this but I could not get it to dance. It would be great if I could get it to work. A working sample might be useful.

  4. veera says:

    when i use themeswitchertool this originally download from the JQuery site it’s working without change the theme when navigate one to another(Asp.Net masterPage)

    but am trying to use your script themeswitchertool.js, of-course it’s working but, whenever page navigate to other page the theme change to default.

    any solutions.

  5. veera says:

    come with solution!
    change the script(inside the themeswitchertool.js)

    /* Theme Loading
    ———————————————————————*/
    switcherpane.find(‘a’).click(function(){
    updateCSS( $(this).attr(‘href’) );
    var themeName = $(this).find(‘span’).text();
    button.find(‘.jquery-ui-themeswitcher-title’).text( options.buttonPreText + themeName );
    $.cookie(options.cookieName, themeName);
    options.onSelect();
    if(options.closeOnSelect && switcherpane.is(‘:visible’)){ switcherpane.spHide(); }
    return false;
    });

    //function to append a new theme stylesheet with the new style changes
    function updateCSS(locStr){
    var cssLink = $(”);
    $(“head”).append(cssLink);

    if( $(“link.ui-theme”).size() > 3){
    $(“link.ui-theme:first”).remove();
    }
    }

    now it’s working good.

Leave a Reply