How to Create a Selectable Interface in CSS3 - dummies

How to Create a Selectable Interface in CSS3

By John Paul Mueller

Making it possible to select from a list of items in CSS3 reduces the chance that the user will enter incorrect information. Fortunately, HTML5 already comes with a number of selection controls, but you may find that these controls don’t quite fulfill your needs at times.

In this case, a custom selection technique implemented with jQuery UI might answer the need. A selection sequence can consist of a <div> and a series of <p> tags, as shown here. (You can find complete code for this example in the Chapter 06Interactions folder of the downloadable code as SelectContent.HTML.)

<div id="Selections">
 <p id="Red">Red</p>
 <p id="Green">Green</p>
 <p id="Blue">Blue</p>
 <p id="Purple">Purple</p>

Notice that the <div> acts as a container and the <p> tags act as items within the container. (The example includes CSS styles to format each of the selectors, such as using a red background for the Red element — a #Selections style defines the width of the selectors, along with the margin and padding used to display them.)

No matter how you implement your custom list (and it need not be the arrangement shown), it must have a container/item arrangement like the one shown here. When you have the arrangement in place, you can create a selection and tracking mechanism like the one shown in the following code:

// Create an array to track the selections.
var Selections = new Array();
// Handle the selects and unselects.
  selected: function(event, ui)
  // Verify the item hasn't already
  // been added.
  if (Selections.indexOf( ) ==
   // Add the id of the selected item
   // to the array.
  unselected: function(event, ui)
  // Find the location of the unselected
  // item in the array.
  var Index =
  // Remove that item.
  Selections.splice(Index, 1);
// Display the results.
function ShowResults()
 alert("You have selected: " + Selections);

The Array, Selections, keeps track of the current selection list. To make the <div>, Selections, selectable, you use the selectable() method. This example uses two events, selected and unselected, to keep track of the current selections. When the user selects a new item, the selected event handler verifies that the item doesn’t already appear in Selections, and then it pushes the new item onto Selections.

The unselected event handler must perform two tasks. First, it must locate the unselected item using the indexOf() method. Second, it must use splice() to remove that item from Selections.

This example doesn’t provide any fancy output, but you can see for yourself how well the selection methodology works. Click Show Selections to display the list of selected items. The ShowResults() event handler displays a list of the selections for you. In a production application, you could just as easily process each of the selected items.

A final piece to this particular application is the need to define one special style. You must provide a means for the display to register the selected state of a particular item, which means providing values for the #Selections .ui-selected style, as shown here:

#Selections .ui-selected
 background: black;
 color: white;

When a user selects an item, the background turns black with white text so the user can see a visual change. You could also modify the text as a second means of helping the user see the selection.