jQuery Mobile 表單滑動條和開關
阿新 • • 發佈：2019-02-01
1、jQuery Mobile 滑動條控制元件
滑動條允許您從一個範圍的數字中選擇一個值：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/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>
使用以下屬性來規定限制：
（1）、max - 規定允許的最大值
（2）、min - 規定允許的最小值
（3）、step - 規定合法的數字間隔
（4）、value - 規定預設值
提示: 如果你想在按鈕中顯示進度的值可以新增 data-show-value="true" 屬性:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/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>
提示: 如果你想在滑動按鈕上顯示進度（類似一個小彈窗）可以使用 data-popup-enabled="true" 屬性:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /> <script src="../../js/jquery.js"></script> <script src="../../js/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>
提示：如果您想要高亮突出顯示滑動條的值，請新增 data-highlight="true"：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/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-highlight="true">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>
2、撥動開關
波動開關通常用於 on/off 或 true/false 按鈕：我們可以使用 <input type="checkbox"> 元素並指定 data-role 為 "flipswitch" 來建立開關:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/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>
預設情況下，開關切換的文字為 "On" 和 "Off"。你可以使用 data-on-text 和 data-off-text 屬性來修改它：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/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>
提示:開關複選框可以使用 "checked" 屬性來設定預設的選項：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/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>
