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
If you enjoyed this post, make sure you subscribe to my RSS feed!
Share or Bookmark this post…