If you are considering using jQuery UI Theme Switcher Tool or Themeroller, it will be good to first learn how to code objects to use the jQuery UI CSS classes which are required. Below, I’ll briefly describe how to setup HTML elements to use the jQuery UI CSS Framework.
I am assuming you already know a little about Cascading Style Sheets (CSS). If not, this tutorial would be your first step. If you already know CSS, your next step would be to familiarize yourself with the jQuery UI CSS Framework class names and the function each class serves.
Setting up your document
Before you can use the jQuery UI CSS Framework, you will need to include the necessary files in your HTML document. The required files include the CSS stylesheet and javascript files for jQuery UI. You can obtain the files you need by using the jQuery UI Themeroller application or by building a custom download. … Or you can skip all of that and use my theme switching widget instead.
Here is an example HTML document which is setup to use jQuery, jQuery UI, and jlThemeSwitcher.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Jason Lau" />
<title>jlThemeSwitcher</title>
<script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
<script type="text/javascript" src="jquery.jlthemeswitcher.js"></script>
<script type="text/javascript">
$(function(){
$('#themeswitcher').jlthemeswitcher({
defaultTheme:'Start',
width: '300px',
closeIcon: true,
autoOpen: true
});
});
</script>
</head>
<body class="ui-widget-content">
<div id="themeswitcher"></div>
<div style="margin: 20px; width: 300px;">
<div class="ui-widget-header ui-corner-tl ui-corner-tr" style="padding: 4px;">Test Title</div>
<div class="ui-widget-content ui-corner-bl ui-corner-br" style="padding: 10px;"><a href="javascript:void(0)" class="jlthemeswitcher-opener">Open</a> <a href="javascript:void(0)" class="jlthemeswitcher-closer">Close</a> <a href="javascript:void(0)" class="jlthemeswitcher-toggle">Toggle</a> <span id="debug"></span></div></div>
</body>
</html>
Here is a working copy of the above example.
The Theme Is In The Classes.
jQuery UI CSS class names are used in HTML tags to define the style settings for for each object.
ui-state-default
In the above example, the CSS class in the span tag is ui-state-default. This would apply the CSS styles which are defined in the css class .ui-state-default to the span object.
Below, for example, I’ve listed a number of jQuery UI classes that affect an object’s visual aspects. Using my theme switching widget located at the top of the right-side column on this webpage, you will see how the styles for each of these examples are affected.
ui-state-default
ui-state-active
ui-state-hover
ui-state-highlight
ui-state-error
ui-icon ui-icon-home
Nearly every HTML object can be assigned a class attribute. Additionally, each object’s class attribute can contain multiple classes. Class names should be separated by a space when using more than one class on the same object. Some of the examples above contain multiple classes to illustrate how this is done.
All of that having been said, I’ll demonstrate a couple of techniques for putting these classes to work.
First example, I will create a widget which will have header container and content container with separate classes.
<div class="ui-widget-header ui-corner-tl ui-corner-tr">Example 1</div>
<div class="ui-widget-content ui-corner-bl ui-corner-br">Example 1 Content.</div>
Now if I wanted to add additional styles to this container, I could add additional custom css classes. For example, I will adjust the width and padding. :
<style>
.morecss1 {
padding: 4px 6px; width: 200px;
}
.morecss2 {
padding: 10px 6px; width: 200px;
}
</style>
<div class="ui-widget-header ui-corner-tl ui-corner-tr morecss1">Example 1</div>
<div class="ui-widget-content ui-corner-bl ui-corner-br morecss2">Example 1 Content.</div>
Next example, I will create an icon which will have an outer container.
<style>
.morecss {
padding: 4px; width: 16px; height: 16px; cursor: pointer;
}
</style>
<span class="ui-state-default ui-corner-all morecss"><span class="ui-icon ui-icon-circle-close"></span></span>
Or
<span class="ui-state-error ui-corner-all morecss"><span class="ui-icon ui-icon-info"></span></span>
Basically (very basically), that’s how you can code your webpage’s elements to support jQuery UI CSS Framework.
Note: For this tutorial, I’m using the HTML style tag so it’s easy to see what additional CSS I am adding. However, it is best to use CSS stylesheets and include them in your document’s head as opposed to using the style tag or inline styles within the HTML tags.