jQuery Mobile form slider
jQuery Mobile slider control
Sliders allow you to select a value from a range of numbers:
To create a slider, use <input type="range">:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
Use the following attributes to specify limits:
-
max - specifies the maximum allowed value
-
min - specifies the minimum value allowed
-
step - specifies legal digit intervals
-
value - specifies the default value
Tips: If you want to display the progress value in the button, you can add data-show-value="true" attribute:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-show-value="true">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
Tips: If you want to show progress on the sliding button (similar to a small pop-up window) you can use data-popup-enabled="true" attribute:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-popup-enabled="true">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
Tip: If you want to highlight the value of the slider, add data-highlight="true":
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>滑块控件</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="points">进度:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-popup-enabled="true">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
Toggle Switches
Toggle switches are typically used for on/off or true/false buttons:
We can use the <input type="checkbox"> element and specify the data-role as "flipswitch" to create a switch:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
By default, the text for the switch is "On" and "Off". you can use data-on-text and data-off-text attributes to modify it:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
Tips:The switch checkbox can use the "checked" attribute to set the default options:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked>
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
More examples
range slider
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>区间滑块</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div data-role="rangeslider">
<label for="price-min">价格:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">价格:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
<input type="submit" data-inline="true" value="Submit">
<p>区间滑块让用户选择指定区间的价格。</p>
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
Make a slider with an interval value.
Slider style
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
/* Custom indentations are needed because the length of custom labels differs from
the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
text-indent: -4em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
text-indent: 2em;
}
/* Custom widths are needed because the length of custom labels differs from
the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
width: 8.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
padding-left: 7em;
width: 1.875em;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="switch">切换开关:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-wrapper-class="custom-size-flipswitch">
<br>
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
Running instance »
Click the "Run Instance" button to view the online instance
Set the style for the slider switch.
