博客

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

  • Post category:jquery

使用jQuery Mobile创建一个禁用的滑块，需要进行以下步骤：

步骤一：下载和引入jQuery Mobile

首先需要下载和引入jQuery和jQuery Mobile的相关文件，可以通过以下两种方式：

1. 通过CDN引入

在HTML头部引入以下代码即可：

<!-- 引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入jQuery Mobile -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

2. 通过本地文件引入

下载jQuery和jQuery Mobile的相关文件，并在HTML头部引入以下代码：

<!-- 引入jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- 引入jQuery Mobile -->
<link rel="stylesheet" href="path/to/jquery.mobile.min.css" />
<script src="path/to/jquery.mobile.min.js"></script>

步骤二：创建滑块

接下来，需要创建一个滑块，可以使用以下代码：

<label for="slider-1">滑块：</label>
<input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" />

上述代码创建了一个名称为“slider-1”的滑块，初始值为50，最小值为0，最大值为100。

步骤三：禁用滑块

使用jQuery Mobile可以非常容易地禁用滑块，只需简单地在滑块元素上添加“disabled”属性即可，如下所示：

<label for="slider-1">滑块（已禁用）：</label>
<input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" disabled />

上述代码在创建滑块元素时添加了“disabled”属性，表示该滑块禁用状态下不可操作。

以下为完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Slider</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入jQuery Mobile -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>

    <div data-role="page">

        <div data-role="header">
            <h1>jQuery Mobile Slider</h1>
        </div>

        <div data-role="content">
            <label for="slider-1">滑块：</label>
            <input type="range" name="slider-1" id="slider-1" value="50" min="0" max="100" />

            <p>&nbsp;</p>

            <label for="slider-2">滑块（已禁用）：</label>
            <input type="range" name="slider-2" id="slider-2" value="50" min="0" max="100" disabled />
        </div>

        <div data-role="footer">
            <h4>Powered by jQuery Mobile</h4>
        </div>

    </div>

</body>
</html>

此示例包含两个滑块，一个可用，一个已禁用。

Tags: