jQuery Mobile 滑動條控件

滑動條允許您從一個范圍的數(shù)字中選擇一個值：


如需創(chuàng)建滑動條，請使用 <input type="range">：

實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

使用以下屬性來規(guī)定限制：

  • max - 規(guī)定允許的最大值

  • min - 規(guī)定允許的最小值

  • step - 規(guī)定合法的數(shù)字間隔

  • value - 規(guī)定默認值

提示: 如果你想在按鈕中顯示進度的值可以添加 data-show-value="true" 屬性:

實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

提示: 如果你想在滑動按鈕上顯示進度（類似一個小彈窗）可以使用 data-popup-enabled="true" 屬性:

實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

提示：如果您想要高亮突出顯示滑動條的值，請?zhí)砑?data-highlight="true"：


實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

撥動開關

波動開關通常用于 on/off 或 true/false 按鈕：


我們可以使用 <input type="checkbox"> 元素并指定 data-role 為 "flipswitch" 來創(chuàng)建開關:

實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

默認情況下，開關切換的文本為 "On" 和 "Off"。你可以使用 data-on-text 和 data-off-text 屬性來修改它：

實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

提示:開關復選框可以使用 "checked" 屬性來設置默認的選項：

實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例

更多實例

區(qū)間滑塊

實例 

<!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>區(qū)間滑塊</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>區(qū)間滑塊讓用戶選擇指定區(qū)間的價格。</p>
      </form>
  </div>
</div>

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

制作一個區(qū)間值的滑塊。

滑塊樣式

實例 

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

為滑塊開關設置樣式。