博客

如何使用jQuery Mobile创建一个基本的滑块

  • Post category:jquery

使用jQuery Mobile创建一个基本的滑块需要完成以下步骤：

1. 引入jQuery Mobile库

<head>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

2. 创建滑块

<div data-role="rangeslider">
  <label for="range-1a">Rangeslider:</label>
  <input type="range" name="range-1a" id="range-1a" value="40" min="0" max="100" />
  <input type="range" name="range-1b" id="range-1b" value="80" min="0" max="100" />
</div>

代码分析：

  • data-role="rangeslider"：表示创建一个滑块。
  • label for="range-1a"：为滑块添加一个标签，使得用户可以知道该滑块的用途。
  • input type="range"：表示创建一个滑动条。
  • name：该滑块的名称。
  • id：该滑块的唯一标识符。
  • value：该滑块的默认值。
  • min：该滑块的最小值。
  • max：该滑块的最大值。

示例1：水平滑块

<div data-role="rangeslider">
    <label for="range-2a">Rangeslider:</label>
    <input type="range" name="range-2a" id="range-2a" value="50" min="0" max="100" />
    <input type="range" name="range-2b" id="range-2b" value="75" min="0" max="100" />
</div>

示例2：垂直滑块

<div data-role="rangeslider" data-mini="true" data-options='{"orientation":"vertical"}'>
    <label for="range-3a">Rangeslider:</label>
    <input type="range" name="range-3a" id="range-3a" value="20" min="0" max="100" />
    <input type="range" name="range-3b" id="range-3b" value="80" min="0" max="100" />
</div>

代码分析：

  • data-mini="true"：将滑块的大小设置为mini模式。
  • data-options='{"orientation":"vertical"}'：使用JavaScript对象设置滑块为垂直方向。
  • orientation：可以设置为”horizontal”或”vertical”。

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <title>EXAMPLE</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>EXAMPLE</h1>
        </div>
        <div data-role="main" class="ui-content">
            <div data-role="rangeslider">
                <label for="range-1a">Rangeslider:</label>
                <input type="range" name="range-1a" id="range-1a" value="40" min="0" max="100" />
                <input type="range" name="range-1b" id="range-1b" value="80" min="0" max="100" />
            </div>
            <div data-role="rangeslider">
                <label for="range-2a">Horizontal Rangeslider:</label>
                <input type="range" name="range-2a" id="range-2a" value="50" min="0" max="100" />
                <input type="range" name="range-2b" id="range-2b" value="75" min="0" max="100" />
            </div>
            <div data-role="rangeslider" data-mini="true" data-options='{"orientation":"vertical"}'>
                <label for="range-3a">Vertical Rangeslider:</label>
                <input type="range" name="range-3a" id="range-3a" value="20" min="0" max="100" />
                <input type="range" name="range-3b" id="range-3b" value="80" min="0" max="100" />
            </div>
        </div>
    </div>
</body>
</html>

以上就是使用jQuery Mobile创建一个基本的滑块的完整攻略和两个示例代码的讲解。

Tags: