如何使用 jQuery Mobile 创建数字输入？(1)

📌 相关文章

📜 如何使用 jQuery Mobile 创建数字输入？(1)

📅 最后修改于: 2023-12-03 15:23:54.092000 🧑 作者: Mango

如何使用 jQuery Mobile 创建数字输入？

jQuery Mobile 提供了许多方便的 UI 控件，其中包括数字输入。使用 jQuery Mobile 创建数字输入非常简单，只需遵循以下步骤：

添加 jQuery 和 jQuery Mobile 到你的页面

在 html 的标签中添加以下代码：

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

创建一个数字输入框

使用 <input> 标签创建一个 type 属性为 "number" 的输入框，在输入框中添加 data-type="range" 属性，这样输入框就会显示为滑动条：

<label for="slider-1">Slider:</label>
<input type="number" name="slider-1" id="slider-1" value="0" min="0" max="100" data-type="range">

在上述代码中，设置了 min 和 max 属性，分别代表输入框支持的最小值和最大值。

定义视口

在 <head> 标签中添加以下 meta 标签，以确保输入框适配各种屏幕：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...
</head>

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Mobile Demo</title>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>My Page</h1>
    </div>
    <div role="main" class="ui-content">
      <label for="slider-1">Slider:</label>
      <input type="number" name="slider-1" id="slider-1" value="0" min="0" max="100" data-type="range">
    </div>
    <div data-role="footer">
      <h4>My Footer</h4>
    </div>
  </div>
</body>
</html>

以上就是使用 jQuery Mobile 创建数字输入的步骤。希望对你有所帮助！