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
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
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
You can also enable multiple selections by adding the
Note that the multiple select option is only guaranteed to work if
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.
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:
min- the minimum value of the slider
max- the maximum value of the slider
step- the minimum increment or decrement moving the slider
value- the initial value and therefor the initial position of the slider.
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:
data-show-value="true"- displays the numeric value on the slider button
data-popup-enabled="true"- the value pops above the sliding button when it is moved
data-highlight="true"- makes the left of the slider a different colour
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.
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
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).