Switch Control
Description
A switch control manages boolean on/off flags.
To flip the switch, the user can either tap the control or slide the switch.
To create a switch control, add a select element
with the data-role="slider" and
two options to manage the on/off states.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
div.ui-slider {<!--from w w w . ja va 2 s . c om-->
width: 45%;
}
label.ui-slider {
margin-top: 10px;
float: left;
width: 5em;
}
form p {
clear: left;
margin: 1px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Switch Control</h1>
</div>
<div data-role="content">
<form id="test" id="test" action="#" method="post">
<p>
<label for="sound">Sound:</label>
<select name="slider" id="sound"
data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</p>
<p>
<label for="alerts">Alerts:</label>
<select name="slider"
id="alerts" data-role="slider" data-track-theme="c" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</p>
</div>
</form>
</div>
<script type="text/javascript">
var alertSwitch = $("select#alerts");
// Set alert switch to 'on'
alertSwitch[0].selectedIndex = 1;
alertSwitch .slider("refresh");
</script>
</div>
</body>
</html>
theme
A switch control also consists of two themeable components.
- foreground slider
- background track.
To theme the slider, add the data-theme="a"
attribute to the select element.
To theme the track, add the
data-track-theme="a" attribute to the select element:
<select name="slider" data-theme="b" data-track-theme="c" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>