如何使用jQuery Mobile创建一个迷你尺寸的Fieldcontain

如何使用 jQuery Mobile 创建一个迷你尺寸的 Fieldcontain

添加 jQuery Mobile 框架

在 head 标签中添加以下代码：

<head>
  <meta charset="UTF-8">
  <title>Mini Fieldcontain</title>
  <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/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

创建迷你尺寸的 Fieldcontain
在 HTML 文件中创建一个 div 包含 input 表单和 label 标签，然后给该 div 添加 data-mini="true" 属性。

<div data-role="fieldcontain" data-mini="true">
  <label for="name">Name:</label>
  <input type="text" id="name">
</div>

通过添加 data-mini="true" 属性可以使 Fieldcontain 迷你化，实现 UI 界面的紧凑。

下面展示一个实际的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mini Fieldcontain</title>
  <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/jquery-1.11.3.min.js"></script>
  <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>Mini Fieldcontain</h1>
    </div>
    <div data-role="main" class="ui-content">
      <form>
        <div data-role="fieldcontain" data-mini="true">
          <label for="name">Name:</label>
          <input type="text" id="name">
        </div>
        <div data-role="fieldcontain" data-mini="true">
          <label for="email">Email:</label>
          <input type="email" id="email">
        </div>
        <div data-role="fieldcontain">
          <label for="textarea">Textarea:</label>
          <textarea cols="40" rows="8" id="textarea"></textarea>
        </div>
        <label>
          <input type="checkbox" name="checkbox-mini" data-mini="true">
          Checkbox Mini
        </label>
        <button type="submit" data-mini="true">Submit</button>
      </form>
    </div>
    <div data-role="footer">
      <h4>Footer</h4>
    </div>
  </div>
</body>
</html>

上述示例中，每一个 Fieldcontain 都添加了 data-mini="true" 属性，使表单元素和标签更加紧凑。

另一个更简单的示例：

<div data-role="fieldcontain" data-mini="true">
  <label for="age">Age:</label>
  <input type="number" id="age">
</div>

通过上述操作，即可快速创建一个使用 jQuery Mobile 创建的迷你尺寸的 Fieldcontain。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建一个迷你尺寸的Fieldcontain - Python技术站

如何使用jQuery Mobile创建一个迷你尺寸的Fieldcontain

相关文章