jQuery UI Themes Beginner’s Guide
Create new themes for your JQuery site with this step-by-step guide
What are theme icons?
In any user interface, we see icons all over the place. On your desktop, you see icons that represent the various application shortcuts as well as any files you’ve placed there. The window containing your web browser has icons for the maximize, minimize, and close actions. The benefit of using icons is that they’re incredibly space-efficient, as long as they’re descriptive. Using icons out of context defeats their purpose – you don’t want a button with a “down arrow” icon in your toolbar. This doesn’t mean anything to the user. Having a button with a “trashcan” icon in the tool-bar does make sense—it means I want to delete what I’m looking at. Another potentially harmful use is using icons in places where a text description would better inform the user. For instance, displaying a “trashcan” button in the toolbar might confuse the user if there are several things displayed on the same page, even if they’ve selected something. In these scenarios, we’re often better off using a combination of text and an icon.
The jQuery UI theming framework provides a large selection of icons we can use in our user interfaces. Some of these icons are already used in some widgets, for instance, the accordion uses arrow icons by default. Not only are the icon graphics provided to us – we can choose icon colors in the ThemRoller application – but we also have powerful CSS class we use to apply the icons. Using these classes, we can give existing jQuery UI widgets new icons or we can place them strategically in our application user interface where they prove helpful.
Sometimes, the provided icon set will only go so far. You’ll find that at one point or another, you need new icons that better reflect the concepts of your application domain.
Time for action – preparing the example
It’s time to set up an environment for examples throughout the remainder of this article.
- If you haven’t already, download and extract the jQuery UI package into a directory called jQuery UI from http://jqueryui.com/download.
- At the same level as the jQuery UI directory, create a new index.html file with the following content:
<html >
<head>
<title>Creating Theme Icons</title>
<link href=”jqueryui/development-bundle/themes/base/
jquery.ui.all.css” rel=”stylesheet” type=”text/css” /><script src=”jqueryui/js/jquery-1.5.x.min.js” type=”text/
javascript”></script>
<script src=”jqueryui/js/jquery-ui-1.8.x.custom.min.js”
type=”text/javascript”></script>
<script src=”index.js” type=”text/javascript”></script></head>
<body style=”font-size: 10px;”>
<button id=”my_button”>Click Me</button>
</body>
</html>
- At the same level as the jqueryui directory, create a new index.js file with the following content.
$(document).ready(function(){
$(“#my_button”).button();
});
- Open index.html in your web browser; you should see something similar to the following:
Icons in widgets
Several jQuery UI widgets have icons from the theming framework embedded inside them. We use icons inside widgets to decorate them and to add meaning. Icons are similar to interaction cues, they help guide the user through the application workflow by given subtle hints. Before we start modifying icons used in our theme, we need to take a closer look at the role they play in widgets.
Time for action – default widget icons
Let’s take a look at some of the icons displayed in jQuery UI widgets by default:
- Edit the index.html file created earlier and replace the content with the following:
<html >
<head>
<title>Creating Theme Icons</title>
<link href=”jqueryui/development-bundle/themes/base/
jquery.ui.all.css” rel=”stylesheet” type=”text/css” /><script src=”jqueryui/js/jquery-1.5.x.min.js” type=”text/
javascript”></script>
<script src=”jqueryui/js/jquery-ui-1.8.x.custom.min.js”
type=”text/javascript”></script>
<script src=”index.js” type=”text/javascript”></script></head>
<body style=”font-size: 10px;”>
<input id=”my_datepicker” type=”text” style=”margin-
bottom: 170px;”/><div style=”width: 40%;”>
<div id=”my_accordion”>
<h3><a href=”#”>First</a></h3>
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div><h3><a href=”#”>Second</a></h3>
<div></div><h3><a href=”#”>Third</a></h3>
<div></div></div>
</div>
</body>
</html>
- Edit the index.js file created earlier and replace the content with the following:
$(document).ready(function(){
$(“#my_accordion”).accordion();
$(“#my_datepicker”).datepicker();});
- Reload index.html in your web browser. You should see something similar to the following:
What just happened?
We’ve just created two widgets—a date-picker and an accordion. In index.html, we’ve created the markup for both widgets and in index.js, we construct the jQuery UI components when the page has finished loading.
You’ll notice that both widgets have icons in them by default. The date-picker widget has two arrows beside the month and year. The accordion widget has an arrow in each accordion section header.
These widgets have icons by default because they help bring meaning to the widget succinctly. As a user, I can easily deduce the meaning of the arrows in the date-picker: move to the next or previous month. Additionally, the text “Next” and “Previous” are added to their respective icons as titles. An alternate presentation of these controls is a text link or button: “next month”, “previous month”. This doesn’t add any value; it only takes away from the space inside the widget.
The arrow icon role in the accordion widget is even more obvious. The down arrow represents the currently expanded accordion section. The right arrows represent collapsed sections. Without these arrows, the user would eventually figure out how to work the accordion controls; however, the icons make it much more obvious in a non-intrusive way.
Time for action – setting widget icons
In addition to using the default icons in widgets, we have the option to set the icon in certain widgets. Let’s see how this is done:
- Edit the index.html file created earlier and replace the content with the following:
<html >
<head>
<title>Creating Theme Icons</title>
<link href=”jqueryui/development-bundle/themes/base/
jquery.ui.all.css” rel=”stylesheet” type=”text/css” /><script src=”jqueryui/js/jquery-1.5.x.min.js” type=”text/
javascript”></script>
<script src=”jqueryui/js/jquery-ui-1.8.x.custom.min.js”
type=”text/javascript”></script>
<script src=”index.js” type=”text/javascript”></script></head>
<body style=”font-size: 10px;”>
<button id=”my_button” style=”margin-bottom: 10px;”>View</
button><div style=”width: 40%;”>
<div id=”my_accordion”>
<h3><a href=”#”>First</a></h3>
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div><h3><a href=”#”>Second</a></h3>
<div></div><h3><a href=”#”>Third</a></h3>
<div></div></div>
</div>
</body>
</html>
- Edit the index.js file created earlier and replace the content with the following:
$(document).ready(function(){
$(“#my_button”).button({icons: {primary: “ui-icon-video”}});
$(“#my_accordion”).accordion({icons: {header: “ui-icon-circle-
triangle-e”,
headerSelected: “ui-icon-circle-triangle-s”}
});});
- Reload index.html in your web browser. You should see something similar to the following:
What just happened?
In index.html, we’ve created a button and an accordion widget. In index.js, we build the jQuery UI components of these widgets when the page has finished loading.
In the constructor of the button widget, we pass an object to the icons parameter. This object has a primary value of ui-icon-video. This will give our button a small video icon to the left of the text. Likewise, we pass an object to the icon’s parameter in the accordion constructor. This object has two values – header has a value of ui-icon-circletriangle- e and headerSelected has a value of ui-icon-circle-triangle-s.
The jQuery UI theme framework has several arrow icons to choose from. The framework uses the “compass notation” for arrow icon classes. Say you want an arrow that points up. You could use ui-icon-circletriangle- n, as this arrow points “north”.
The button widget has built-in support for adding a button to text in order to provide additional meaning. In our example, the text view isn’t very meaningful to the user.
With the video icon beside the text view, it becomes very obvious what the button does.
What we’ve done with the accordion widget is slightly different. The accordion widget displays icons by default; we’ve just specified different ones. This is a pure embellishment of the accordion – we’ve found icons that we’d like to use and replaced the default ones. We might even want to replace them with our own icons that we create.
