Change Page Themes Dynamically Using JQuery Theme Roller

by Prashant 4. July 2010 12:21

If you are using JQuery controls like date picker, accordion, progress bar, slider, tabs, dialog etc. You can set the theme of your choice or you can also allow the user to set the theme of their choice. For those folks who don’t know about the JQuery Theme Roller, then take a look at official Jquery site demonstrating the Jquery Theme Roller. The best part is when you select the theme from the theme roller control all the JQuery controls on the page will automatically inherit the color scheme of the theme.

 To incorporate Theme Roller in your page, build a simple page and link some CSS and some JavaScript

<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
<link rel="stylesheet" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" 
type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" 
type="text/css" media="all" />
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" 
type="text/javascript"></script>

Now under the head section we will have the JQuery Theme Roller control.

    $(document).ready(function () {
        $('#ThemeRoller').themeswitcher();
    });

Notice the ThemeRoller id of the control passed in the JQuery code to initialize the Theme Roller/Switcher. Now in the Body tag of your page set a div with id as ThemeRoller or whatever the name you want to give, but make sure you use the same name as your control id.

<script type="text/javascript"
  src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="ThemeRoller"></div>

I have set the theme roller on the body of the page and therefore all the controls on the page will automatically change the theme accordingly set by the user using the theme roller on the page. You can also set a DIV or a form on your page instead of setting it for the complete page. Set some other controls on the page like date picker, progress bar, dialog etc. Html code for the controls.

Set some other controls on the page like date picker, progress bar, dialog etc.

<p>Date: <input id="datepicker" type="text" />
</p>
    
<div id="dialog" title="Basic dialog">
    <p>
    This is a Demo Dialog box using JQuery!!<br />
    Change theme to see this Dialog in different theme.
    </p>
</div>
    <div id="progressbar" style="width:200px;">

    </div>

Placing HTML code isn’t enough. You also need to set the JQuery code in the head section of the page to get the controls working. When you set all the JQuery code for the controls you body and head section of the page looks something like this.

Body section of the page:

<body style="font-size:62.5%;">
  
<script type="text/javascript"
  src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="ThemeRoller"></div>

<p>Date: <input id="datepicker" type="text" />
</p>
    
<div id="dialog" title="Basic dialog">
    <p>
    This is a Demo Dialog box using JQuery!!<br />
    Change theme to see this Dialog in different theme.
    </p>
</div>
    <div id="progressbar" style="width:200px;">

    </div>
</body>

Head section of the page:

<head>
<title>JQuery Theme Roller</title>
<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
<link rel="stylesheet" 

href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" 

type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" 

type="text/css" media="all" />
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 

type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" 

type="text/javascript"></script>


<script type="text/javascript">
//Set theme roller 
    $(document).ready(function () {
        $('#ThemeRoller').themeswitcher();
    });

//Show date time picker control
    $(function () {
        $("#datepicker").datepicker();
});

//Show Dialog
    $(function () {
        $("#dialog").dialog();
    });

//Progress Bar
    $(function () {
        $("#progressbar").progressbar({
            value: 50
        });
    });

</script>
</head>

Now try setting the theme of the page in one click using the Theme Roller. Check the live demo here

Tags: ,

Jquery

Comments (12)

Naresh
Naresh
4/20/2012 1:22:00 PM #

When i select a theme from themes Gallery it is not reflecting any changes in the page.

Naresh
Naresh
4/20/2012 1:27:03 PM #

When i select the theme from theme Gallery, the changes are not reflecting for the controls with the themes styles.

Prashant
Prashant
4/20/2012 5:29:41 PM #

Did you check out the demo page in the above post. The link is in the end of the post. Try the same implemented in the demo page first and then try with the theme you have downloaded.

Naresh
Naresh
4/19/2012 6:37:51 PM #

I would like to place complete themeroller (Roll your own and Gallery) into my web page, can you please help me out in doing this.

Prashant
Prashant
4/19/2012 6:50:30 PM #

What is the problem you are facing?

Naresh
Naresh
4/19/2012 7:05:16 PM #

hi Prashant, i am able to place the complete tabs, but unable to send the parameters to what i have selected and to download my selected themes. thanks, Naresh

Naresh
Naresh
4/19/2012 7:10:57 PM #

i was able to place the complete themeroller into my page but unable to send the parameters, to download the desired theme.

Prashant
Prashant
4/19/2012 8:20:02 PM #

Can you be more specific. You said you were able to place the tabs, but unable to download the theme. I didn't get this point.

Prashant
Prashant
10/22/2011 10:34:28 AM #

If you take a look at the head section you will see that all the js and css file reference are from the Google's CDN. What you need to do is to get the latest release of the jQuery UI from jquery.com and place these files with your intranet application or to the local server path. Now on the page where you want a Theme Roller, you need to reference the js and css files from the folder in your local server path.

wira
wira
10/21/2011 6:57:34 AM #

Nice topic,.. I just use this tool into my intranet, but my question is, how to make themeroller take the css from local server, not requesting into jquery website. I need this because not all my workstation connected into internet.

Sanjay M
Sanjay M
9/29/2010 2:56:23 PM #

thanks a ton, this was really useful! What I'd really like to know, which I couldn't quite figure out, is how to 'save' the selected theme that gets used later again, its supposed to use some sort of cookie mechanism I think, maybe in my application this is hardcoded, will have to check. Also, instead of using the jquery-ui hosted themes, is there any way I can get a localised version that can by which I can get it to list my own themes? It seemed to be loading the themes list from some PHP file on the server, so as of now couldn't figure out a way to modify this in any way.

Prashant
Prashant
9/29/2010 5:57:19 PM #

Yes, you can save but theme roller doesn't provide any way to save the selected theme in the cookie. What you can do is to download the themes http://jqueryui.com/themeroller/ and place it in your web folder or theme directory. Select the theme you want to download from the "Gallery" tab and then download from "Roll Your Own" tab. Get the collection, let the user select from the combo box on your web page, save it in a cookie or some other persistent storage. Hope this helps!

Add Comment

*
*
 

Visit blogadda.com to discover Indian blogs Computers Blogs