jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

Exclusive offer: get 50% off this eBook here
jQuery UI Themes Beginner's Guide

jQuery UI Themes Beginner's Guide — Save 50%

Create new themes for your JQuery site with this step-by-step guide

$23.99    $12.00
by Adam Boduch | July 2011 | Open Source

Icons inform users as to what something does. Icons also need to belong as part of the overall look and feel of the theme. In this article by Adam Boduch, author of jQuery UI Themes Beginner's Guide, we shall:

  • Look at the role icons play in themes
  • Use icons with states

 

jQuery UI Themes Beginner's Guide

jQuery UI Themes Beginner's Guide

Create new themes for your JQuery site with this step-by-step guide

        Read more about this book      

(For more resources on jQuery, see here.)

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.

  1. If you haven't already, download and extract the jQuery UI package into a directory called jQuery UI from http://jqueryui.com/download.
  2. At the same level as the jQuery UI directory, create a new index.html file with the following content:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Creating Theme Icons</title>

    <link href="jqueryui/development-bundle/themes/base/
    jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-1.5.x.min.js" type="text/
    javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-ui-1.8.x.custom.min.js"
    type="text/javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="index.js" type="text/javascript"></script>

    </head>

    <body style="font-size: 10px;">

    <button id="my_button">Click Me</button>

    </body>

    </html>

  3. At the same level as the jqueryui directory, create a new index.js file with the following content.

    $(document).ready(function(){

    $("#my_button").button();

    });

  4. Open index.html in your web browser; you should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

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:

  1. Edit the index.html file created earlier and replace the content with the following:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Creating Theme Icons</title>

    <link href="jqueryui/development-bundle/themes/base/
    jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-1.5.x.min.js" type="text/
    javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-ui-1.8.x.custom.min.js"
    type="text/javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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>

  2. Edit the index.js file created earlier and replace the content with the following:

    $(document).ready(function(){

    $("#my_accordion").accordion();
    $("#my_datepicker").datepicker();

    });

  3. Reload index.html in your web browser. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

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:

  1. Edit the index.html file created earlier and replace the content with the following:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Creating Theme Icons</title>

    <link href="jqueryui/development-bundle/themes/base/
    jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-1.5.x.min.js" type="text/
    javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-ui-1.8.x.custom.min.js"
    type="text/javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="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>

  2. 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"}
    });

    });

  3. Reload index.html in your web browser. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

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.

jQuery UI Themes Beginner's Guide Create new themes for your JQuery site with this step-by-step guide
Published: July 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on jQuery, see here.)

Standalone icons

With the jQuery UI theming framework, we're not restricted to applying icon styles, which actually display the icon in the user interface, to widgets. We can apply icon classes to any other page elements where they help illustrate the meaning. It is best to use icons from the same set so that we can preserve consistency.

Time for action - displaying the current user

It's time to place an icon beside the currently logged-in user:

  1. Edit the index.html file created earlier and replace the content with the following:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Creating Theme Icons</title>

    <link href="jqueryui/development-bundle/themes/base/
    jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-1.5x.min.js" type="text/
    javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-ui-1.8.x.custom.min.js"
    type="text/javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="index.js" type="text/javascript"></script>

    </head>

    <body style="font-size: 10px;">

    <div class="ui-widget ui-widget-content ui-state-default"
    style="width: 30%; padding: 3px;">

    <span class="ui-icon ui-icon-person" style="float:
    left;"></span>
    <span style="margin-left: .3em;">admin</span>
    <span style="float: right;">Last Login: <strong>Feb 23
    2011 03:16 PM</strong></span>

    </div>

    </body>

    </html>

  2. Reload index.html in your web browser. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

What just happened?

We've created a content box for our user interface which displays the current user and the last time they logged in. In index.html, we've created a container div element for our user content. This div has the ui-widget, ui-widget-content, and ui-state-default classes applied to it. These classes give our content box styles from the jQuery UI theme.

Inside the div, we have three span elements. The first span is used to display the user icon. This is done by applying the ui-icon and ui-icon-person classes to it. The next span displays the current user. Finally, the last span displays the date of the user's previous login.

We call this approach to using icons from the jQuery UI theme "stand-alone" because we're not selecting an icon to display inside a widget as we did in the previous section. Instead, we're applying various constructs from the theming framework, including the icon, to create our own content. As this context box is likely to be of value on more than one page in our application, we'd probably want to create a widget that applies the styles as we've done here.

Time for action - identifying entities

In the previous example, we used an icon from the theming framework to identify the current user. We can also use icons to identify groups of different entity types:

  1. Edit the index.html file created earlier and replace the content with the following:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Creating Theme Icons</title>

    <link href="jqueryui/development-bundle/themes/base/
    jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-1.5.x.min.js" type="text/
    javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-ui-1.8.x.custom.min.js"
    type="text/javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="index.js" type="text/javascript"></script>

    <style type="text/css">

    ul {

    list-style-type: none;
    padding: 1px;

    }

    div, ul li {

    margin-bottom: 2px;

    }

    div {

    width: 30%;
    padding: 3px;

    }

    </style>

    </head>

    <body style="font-size: 10px;">

    <div class="ui-widget ui-widget-content">

    <h1 class="ui-widget ui-widget-header">Unread
    Messages</h1>

    <ul>

    <li class="ui-widget ui-widget-content ui-state-
    default">

    <span class="ui-icon ui-icon-mail-closed"
    style="float: left;"></span>
    <span style="margin-left: .3em;">Message 1 -
    <i>Subject 1</i></span>

    </li>

    <li class="ui-widget ui-widget-content ui-state-
    default">

    <span class="ui-icon ui-icon-mail-closed"
    style="float: left;"></span>
    <span style="margin-left: .3em;">Message 2 -
    <i>Subject 2</i></span>

    </li>

    </ul>

    </div>

    <div class="ui-widget ui-widget-content">

    <h1 class="ui-widget ui-widget-header">Read Messages</
    h1>

    <ul>

    <li class="ui-widget ui-widget-content ui-state-
    default">

    <span class="ui-icon ui-icon-mail-open"
    style="float: left;"></span>
    <span style="margin-left: .3em;">Message 3 -
    <i>Subject 3</i></span>

    </li>

    <li class="ui-widget ui-widget-content ui-state-
    default">

    <span class="ui-icon ui-icon-mail-open"
    style="float: left;"></span>
    <span style="margin-left: .3em;">Message 4 -
    <i>Subject 4</i></span>

    </li>

    </ul>

    </div>

    </body>

    </html>

  2. Reload index.html in your web browser. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

What just happened?

We've created two lists—a list of unread messages and a list of read messages. We use an icon to differentiate between the items in each list - a read message and an unread message.

In index.html, we have two div elements that are nearly identical. We'll explore only one, and then we'll look at the differences. In the header of index.html, we've created several style definitions for the purposes of this example. Mostly just padding and removing the default list styles. Within the div, we have a h1 header which gives the title of the list. Next, we have the list itself. Each list item has styles from the theming framework applied to it, including the icon that identifies the entity type.

The main difference between the two lists is the entity type. The first list shows unread messages and the second, read messages. We use an icon for each item in the list - ui-icon- mail-closed and ui-icon-main-open. Sometimes it is valuable to be explicit in what you're labeling with an icon. For instance, we could have just placed the ui-icon-mail- closed icon beside the "Unread" header. This would carry the same meaning, just not the same immediacy.

We can use icons to differentiate between the entities in our application. We have the flexibility of applying icons using CSS classes from the theming framework. However, the icon sets provided by default probably won't cover all entities we'll want to display.

Icon states

As we've seen previously, jQuery UI widgets change appearance depending on what state they're currently in. For instance, a button in an error state looks different than a button in a default state. Icons in jQuery UI themes also need to change appearance when a change in state is applied. This usually results in the icon changing color. In this section, we'll take a closer look at how states in the CSS framework change the appearance of theme icons.

Time for action - default icons

It's time to see how icons in the default state are applied:

  1. Edit the index.html file created earlier and replace the content with the following:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Creating Theme Icons</title>

    <link href="jqueryui/development-bundle/themes/base/
    jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-1.5.x.min.js" type="text/
    javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="jqueryui/js/jquery-ui-1.8.x.custom.min.js"
    type="text/javascript"></script>
    <script src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="index.js" type="text/javascript"></script>

    </head>

    <body style="font-size: 10px;">

    <button id="my_button">View</button>

    </body>

    </html>

  2. 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"}});

    });

  3. Reload index.html in your web browser. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

  4. What just happened?

We've created a simple button widget. In index.html, we've got a basic button element that is transformed into a jQuery UI button widget in index.js when the page has finished loading. We specify the icon we want to use in the button's constructor.

This button is in a default state. This means that the .ui-state-default .ui-icon style definition determines the icon image file used on the button. The following diagram illustrates how the image file is selected:

jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

Time for action - highlight icons

It's time to see how icons in the highlight state are applied:

  1. Reuse the same content from index.html in the previous example.
  2. 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"}})
    .addClass('ui-state-highlight');

    });

  3. Reload index.html in your web browser. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

What just happened?

We've reused the same HTML from the previous example to create a button that has a video icon in it. In index.js, once the jQuery UI button is constructed, we apply the ui-state-highlight class to it. This changes the image file used to display the icon in the button. The following illustration depicts how the .ui-state-highlight .ui-icon style definition applies the appropriate image file to the button:

jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

Time for action - error icons

It's time to see how icons in the error state are applied:

  1. Reuse the same content from index.html in the previous example.
  2. 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"}})
    .addClass('ui-state-error');

    });

  3. Reload index.html in your web browser. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

What just happened?

We've replicated the previous example with one minor difference - the button is now in an error state instead of a highlight state. This also changes the color of the icon displayed in the button to read. This obviously wouldn't look right had the button icon kept the default color.

The icon in the button uses the .ui-state-error .ui-icon, .ui-state-error-text .ui-icon style definition to apply the icon image file. The following illustration shows how the button widget acquires the image file based on its state:

jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

Time for action - hover icons

It's time to see how icons are applied to buttons in a hover state:

  1. Reuse the content from index.html in the previous example.
  2. Edit the index.html file created earlier and replace it with the following:

    $(document).ready(function(){

    $("#my_button").button({icons: {primary: "ui-icon-video"}});

    });

  3. Reload index.html in your web browser and hover over the button. You should see something similar to the following:

    jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

What just happened?

We created a plain jQuery UI button widget. This button is in a default state. We put it into a hover state moving the mouse pointer over it. When we put the button into a hover state, we're actually changing the button's icon image. This is due to the ui-state-hover .ui-icon, .ui-state-focus .ui-icon style selector. The image file used when the button enters the hover state is illustrated as follows:

jQuery UI Themes: Theme icons, Standalone Icons, and Icon States

Have a go hero

Try updating the ui-state-hover class in the theme CSS so that it points to a different image file.

Summary

We've learned a lot about jQuery UI theme icons in this article. We've also learned about the roles icons play in user interfaces. Icons are most effective when they add meaning to user interface components, and as a side-effect, reduce the amount of redundant text.

The jQuery UI theming framework allows icons to be used both in widgets as well as being placed on the page as stand-alone elements. Different icon images files are used depending on the state of the icon. This is made possible by using a sprite technique to arrange icons. The only difference between the image files is their colors.


Further resources on this subject:


jQuery UI Themes Beginner's Guide Create new themes for your JQuery site with this step-by-step guide
Published: July 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Adam Boduch

Adam Boduch has spent the last several years developing user interfaces for large-scale software systems. Starting out as a backend Python developer, he was lured to the frontend by tools like jQuery UI. Adam is passionate about readable code, and writes extensively about jQuery UI widgets, including his previous book jQuery UI Themes Beginner's Guide, Packt Publishing.

When Adam isn't coding, reading or writing, you will usually find him playing hockey, or spending time with his family.

Books From Packt


jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

jQuery Mobile First Look
jQuery Mobile First Look

Django JavaScript Integration: AJAX and jQuery
Django JavaScript Integration: AJAX and jQuery

PHP jQuery Cookbook
PHP jQuery Cookbook

ASP.NET jQuery Cookbook
ASP.NET jQuery Cookbook

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery


Your rating: None Average: 3 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
6
v
M
u
v
a
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software