How to Define a Specialized CSS3 Control - dummies

How to Define a Specialized CSS3 Control

By John Paul Mueller

All the jQuery UI widgets lend themselves to CSS3 customization. Most of the changes you make deal with using built-in features correctly. You can also work with the CSS that jQuery UI employs to format the widgets to produce special effects.

Of course, if nothing else, you can always use JavaScript to modify the actual widget behavior as needed. The point is that you can change widgets (such as Spinner) to meet specific needs without having to reinvent the wheel. The modifications are usually short and easy to do, which means you don’t have to start from scratch with an idea you have to code by hand.

Spinners are popular because you can use them to control user input in a number of ways. The idea is to provide control for data that’s normally variable, so you can’t use something like a drop-down list box. One of the most interesting uses of spinners is shown on Ben Knows Code site.

In this case, the author shows how to perform tasks such as moving the location of the arrows and creating an alphabetical spinner. The example used here plays off the example on this site, but it’s a bit more straightforward and easier to understand. Once you understand this example, you can go to the Ben Knows Code site and understand that example right away.

Spinners normally deal with numeric input. However, you might have a need for alphabetic input instead. To create an alphabetic input, you need to give the appearance of letters without actually using letters, because the Spinner widget works only with numbers. The following example takes a standard jQuery UI Spinner widget and transforms it to use letters instead of numbers.

 var CurrentValue = 65;
 var ThisSpinner = $("#Spinner").spinner(
  // Set the minimum to the code for A
  // and the maximum to the code for Z.
  min: 65,
  max: 90,
  // When the user starts to spin the spinner,
  // convert the value to a number and hide the
  // text from view.
  start: function(ui, event)
  ThisSpinner.spinner("value", CurrentValue);
  $("#Spinner").css("color", "transparent");
  // When the user stops spinning the spinner,
  // save the numeric value, convert it to a
  // letter and display the text onscreen.
  stop: function(ui, event)
  CurrentValue =
  $("#Spinner").css("color", "green");

The code begins by creating a variable, CurrentValue, that tracks the numeric value of the spinner. The value, 65, is the numeric equivalent of the letter A. So the spinner starts with a value of A, but it stores this value as the number 65.

Creating the spinner, ThisSpinner, comes next. You must set minimum and maximum values that reflect the numeric values of A and Z. This same technique can work for any series of letters. You could just as easily use lowercase letters, if desired. For that matter, any series will work, including special characters. It’s even possible to use this approach for enumerated values.

The simplest approach provides handlers for the start and stop events. When the user clicks one of the two arrows, it starts a spin event. The change occurs, and then the spin stops. For the spinner to work correctly, the value attribute must contain a numeric value.

The code sets value to CurrentValue, which is the code that equates to the currently selected letter. However, at this point, you can see the numeric value as text in the spinner, which is distracting. To keep this from happening, the event handler also sets the text color to transparent, so the user can’t actually see the text onscreen.

Make sure you think about how you set the colors for hidden items. There’s a tendency with some developers to set the hidden item’s color to the background color, but the background color can change. Even though many references don’t actually state it, one of the recognized colors is transparent, which means no color at all. Always use transparent objects when you want to hide something.

The stop event handler stores the new spinner value in CurrentValue. It then converts the numeric value from a number, such as 65, to a letter, such as A. The code then changes the text color to green so the user can see the letter onscreen.


This example also changes a few of the widget styles. These styles are listed as part of the jQuery UI CSS file. In this case, you don’t want the user to be able to type more than one character, so the width of the widget is changed to accept just one letter. In addition, the text color is changed to green, as shown here:

 width: 45px;
 color: green;

Using a combination of events and CSS lets you create all sorts of custom effects with any of the jQuery UI widgets. All you need to do is experiment a little to create some really interesting output.