The jQuery UI CSS Framework – Part 2: How To Create Widget-style Boxes

By | February 3, 2010

This is the second post in a series on the jQuery UI CSS Framework.    Here’s the first one.

Today I’ll show you how to create a nice looking box that has sort of a widget appearance to it. The jQuery UI components already provide similar functionality. For example, the Dialog Box is quite pretty, and you can easily make it modal or not.  But frequently we want to make a box for content somewhere on a page- much like the sorts of boxes that appear on WordPress blogs, Drupal sites or iGoogle, for example.  The jQuery UI CSS Framework comes with selectors that make this easy. Also, remember that one of the benefits of the UI framework is that you can easily change the theme of your site, without having to touch any markup or CSS – you simply change the path of the external theme css file to point to another directory. Again, the examples I’ve made use the Redmond theme.  Here’s the markup for a simple box with a nice heading:

<div id="mybox" class="ui-widget ui-widget-content ui-corner-all" style="margin-top:20px; width:300px; height: 150px;">
  <h3 class="ui-widget-header">Weather Widget</h3>
  <p><span class="ui-icon ui-icon-comment" style="margin: 0 2px 0 2px; float:left;"></span> Tomorrow it will be light during the day, and dark at night.</p>
</div>

It’s rendered (in FireFox) like this:

weatherwidget

As you can see, the markup is pretty simple.  I’ve given the container  div an arbirtrary width and height. You might want to specify  a width, but omit the height s that the div just stretches with your content.  Let’s look at the classes used for the div, the heading (h3) and the image respectively:

The div tag:    The class  .ui-widget  ensures we use  a consistent font family and size for the content inside it. It also applies the 1.1em rule. Combined with the css selector :    body {font-size: 62.5%} this initially yields a font size of 11px at typical screen resolutions. This whole 1.1em thing can be a bit of a problem, as I’ve discussed in other posts. For example, if I embed another container using the same selectors, my text comes out at 12.1px (1.1x 1.1em).  You can inspect your element with Chris Pederick’s Web Developer plugin for FireFox to see bad behavior at work. For example, see below:

Font size for second container text is now 12.1px, not 11px.

Font size for second container text is now 12.1px, not 11px.

I ran into this in an app where I had tabs embedded inside tabs. The jQuery UI code applies the .ui-widget class to tabbed content containers behind the scenes, so I ended up with oversized text compared to the rest of my page.

The class of .ui-widget-content applies the border, along with some padding. the .ui-corner-all selector gives us rounded corners (in FireFox and Chrome, not IE).

The h3 tag: This uses the class  .ui-widget-header. This is pretty self explanatory. It applies a nice background on white text (based on the Redmond theme) to our heading. You can use this class on other tags, too. For example, I use it on tr tags for my table heading rows.

The image (span) tag: (.ui-icon and .ui-icon-comment).  I just threw this in as a bonus for this lesson. jQuery UI is very clever at handling icons. Instead of having a whole bunch of images, you basically have one big image sliced into squares, with each icon class being a small window over the appropriate square. This is a variation on the famous Sliding Doors sprite concept at A List Apart.  It saves different image resources having to be loaded, to optimize performance. It also allows the icons to be themed easily, because you don’t have to change the path for an image, as you would for a typical HTML img tag. You can also apply a hover state to any icon in the set, simply by setting the class to .ui-state-highlight.  We’ll cover this in more detail in a later article.

In this case, I used a span tag to display the comment icon. This could also be an anchor tag, or a li tag, or whatever.   The .ui-icon class gives us a 16 x 16 pixel area blocked out for whatever icon we choose. The .ui-icon-comment class displays a comment icon (similarly, .ui-icon-trash shows a trash can, etc. etc.). You can see the entire set of available icons at the Themeroller page.  The default setting for .ui-icon is display:block, which forces a line break, which is why I had to add an inline style setting of “float: left” to get it to appear on the same line as my text.

That’s it!  the next article will show you how to style pretty forms elements with the framework.

8 thoughts on “The jQuery UI CSS Framework – Part 2: How To Create Widget-style Boxes

  1. DevInet

    Nice article, very usefull. How do I move the ui-widget-header to the top of the box, like all widgets?

  2. Jef

    Is that a jab at one of R.E.M.’s songs with the Kenneth part?

  3. Zambonilli

    You can get the header to be rounded and up all the way vertically if you change the H3 to a div and add the ui-corner-all class to the div.

    IE:

    Weather Widget
    Tomorrow it will be light during the day, and dark at night.

  4. Pingback: Kompass

Leave a Reply

Your email address will not be published. Required fields are marked *