Barry's jQuery Mobile Demos: More Form Widgets

Select menus

Select menus (also called drop-down list) are a space saving list from which one selection is visible but a full list becomes visible when a selection is to be made. A select menu is defined using a <select> tag. For example, the following code defines a select menu with five options.

<label for="select1">Chose colour:</label>
<select name="colour" id="select1">
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Blue">Blue</option>
  <option value="White">White</option>
  <option value="Black">Black</option>
</select>

When the widget is closed it appears as follows.

Open the widget and select the "white" option to see how the new selection replaces the old one.

We can also group menu items together with an <optgroup> tag. As an example, we can divide the above colour example in two groups with the following code.

<label for="select2">Chose colour:</label>
<select name="colour" id="select2">
  <optgroup label="primary">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
  </optgroup>
  <optgroup label="secondary">
    <option value="White">White</option>
    <option value="Black">Black</option>
  </optgroup>
</select>

This would appear as follows.

try selecting the "white" entry. The separators cannot be selected ("primary" and "secondary" in this example). Each mobile platform has its own way for displaying select menus. If you want all devices to use the same jQuery mobile method and not the device built-in method then you can add the data-native-menu="false" attribute to the <select> tag.

You can also enable multiple selections by adding the multiple="true" attribute to the <select> tag. Note that the multiple select option is only guaranteed to work if data-native-menu="false" has been specified. The following example has a select tag defined with both attributes, i.e.

<select name="colour" id="select3" data-native-menu="false" multiple="true">

It will appaear as follows:

Try selecting multiple entries in this example. Notice how multiple selections appear in the select bar and a count bubble appears. Since we disabled the native format this may appear quite different to the previous select example if you are using a mobile device.

Sliding controls

There are two sliding controls, the slider which allows one of a range of values to be selected and the flip toggle switch which allows one of two options to be selected. A slider is defined with the type="range" attribute for an input tag. There are several configuration options that are set by other attributes in the slider definition. These attributes are:

An example of a slider definition is:

<label for="slider1">Score:</label>
<input type="range" name="score" id="slider1" max="100" min="0" value="20"/>

This would display initially as follows.

Notice how the default value is the initial position of the slider and the default value is displayed in the numeric field to the left of the slider. Try moving the slider to see the effect.

There are also a few cosmetic options for sliders:

Examples of the three options are:

Move each of the above sliders to see the effect. If you wish you can also use more than one of the above effects on a single slider.

Flip toggle switch

The flip toggle switch is the simplest type of slider because it only has two values. They are defined as a variation of a checkbox and have a simple definition such as the following:

<label for="switch1">Try me:</label>
<input type="checkbox" data-role="flipswitch" name="sw1" id="switch1">

The two states for this switch are displayed as follows.

The value "On" and "Off" displayed on the switch are the default values. We can change these using the data-on-text and data-off-text attributes. For example, we can create a switch with the values "Yes" and "No" using the following definition.

<label for="switch2">Try me:</label>
<input type="checkbox" data-role="flipswitch" name="sw2" id="switch2" 
      data-on-text="Yes" data-off-text="No">

The two states of these switches would appear as follows.

Note that there is a limitation on the default width of the switch where long words will not fit on the switch. We can however change the width of the switch to make longer words fit using jQuery Mobile CSS styles (see example at W3Schools).

Home