博客

如何使用jQuery Mobile制作迷你垂直复选框控制组

  • Post category:jquery

下面我来分享一下如何使用jQuery Mobile制作迷你垂直复选框控制组的完整攻略。

1. 准备工作

首先，在项目中引入jQuery和jQuery Mobile的JS和CSS文件。可以通过官网下载，也可以通过CDN引入，示例如下：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

2. 制作迷你垂直复选框控制组

2.1 HTML结构

制作迷你垂直复选框控制组，需要使用jQuery Mobile提供的checkboxradio组件。HTML结构如下：

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
  <legend>选择语言</legend>

  <label for="lang-c">
    <input type="checkbox" name="languages[]" id="lang-c" value="c">
    C语言
  </label>

  <label for="lang-java">
    <input type="checkbox" name="languages[]" id="lang-java" value="java">
    Java
  </label>

  <label for="lang-python">
    <input type="checkbox" name="languages[]" id="lang-python" value="python">
    Python
  </label>
</fieldset>

以上代码中，fieldset元素使用三个data-*属性指定控制组的类型、大小等。

label元素for属性绑定对应的input元素。

input元素type属性为checkbox，name属性为languages[]，表示此控制组对应的表单项，多个选项使用数组格式提交。

2.2 JS处理

为了在选择控制组中，正确选中已选项，需要使用JS来处理。代码如下：

// 初始化控制组
$("fieldset[data-role='controlgroup']").controlgroup();

// 默认选中C语言
$('#lang-c').prop('checked', true).checkboxradio('refresh');

// 监听更改事件
$("input[name='languages[]']").change(function() {
  // 遍历所有选项
  $('input[name="languages[]"]').each(function() {
    var isChecked = $(this).is(':checked');
    var dataIcon = isChecked ? 'check' : 'false';
    var parent = $(this).closest('.ui-checkbox');
    parent.find('.ui-icon').removeAttr('class').addClass('ui-icon ui-icon-' + dataIcon + ' ui-widget-icon-fa ui-corner-all');
  });
});

以上代码中，初始化控制组使用了controlgroup方法，以实现控制组的选择状态更改时更改样式。

默认选中C语言使用了prop和checkboxradio方法，并调用refresh方法刷新控制组的样式。

更改事件中，使用了$(this).is(':checked')确定当前项是否被选中，使用addClass方法更改对应的ui-icon图标。

3. 示例

下面提供两个完整的示例，演示如何使用jQuery Mobile制作迷你垂直复选框控制组，示例代码可在浏览器中运行查看效果。

3.1 示例1：基础示例

该示例展示了基本的迷你垂直复选框控制组，选项包括C语言、Java和Python。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Mobile迷你垂直复选框控制组基础示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
  <style>
    /* 修改ui-icon位置 */
    .ui-popup-container .ui-checkbox .ui-icon {
      right: 7px !important;
    }
  </style>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>迷你垂直复选框控制组基础示例</h1>
    </div>

    <div data-role="content">
      <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
        <legend>选择语言</legend>
        <label for="lang-c">
          <input type="checkbox" name="languages[]" id="lang-c" value="c">
          C语言
        </label>

        <label for="lang-java">
          <input type="checkbox" name="languages[]" id="lang-java" value="java">
          Java
        </label>

        <label for="lang-python">
          <input type="checkbox" name="languages[]" id="lang-python" value="python">
          Python
        </label>
      </fieldset>
    </div>

    <div data-role="footer">
      <h4>www.example.com</h4>
    </div>
  </div>

  <script>
    // 初始化控制组
    $("fieldset[data-role='controlgroup']").controlgroup();

    // 默认选中C语言
    $('#lang-c').prop('checked', true).checkboxradio('refresh');

    // 监听更改事件
    $("input[name='languages[]']").change(function() {
      // 遍历所有选项
      $('input[name="languages[]"]').each(function() {
        var isChecked = $(this).is(':checked');
        var dataIcon = isChecked ? 'check' : 'false';
        var parent = $(this).closest('.ui-checkbox');
        parent.find('.ui-icon').removeAttr('class').addClass('ui-icon ui-icon-' + dataIcon + ' ui-widget-icon-fa ui-corner-all');
      });
    });
  </script>
</body>
</html>

3.2 示例2：扩展示例

该示例在基础示例的基础上，扩展了控制组的选项和样式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Mobile迷你垂直复选框控制组扩展示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
  <style>
    /* 修改ui-icon位置 */
    .ui-popup-container .ui-checkbox .ui-icon {
      right: 7px !important;
    }
  </style>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>迷你垂直复选框控制组扩展示例</h1>
    </div>

    <div data-role="content">
      <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
        <legend>选择语言</legend>

        <label for="lang-c">
          <input type="checkbox" name="languages[]" id="lang-c" value="c">
          C语言
          <span class="ui-li-count">入门</span>
        </label>

        <label for="lang-java">
          <input type="checkbox" name="languages[]" id="lang-java" value="java">
          Java
          <span class="ui-li-count">熟练</span>
        </label>

        <label for="lang-python">
          <input type="checkbox" name="languages[]" id="lang-python" value="python">
          Python
          <span class="ui-li-count">精通</span>
        </label>

        <label for="lang-php">
          <input type="checkbox" name="languages[]" id="lang-php" value="php">
          PHP
          <span class="ui-li-count">熟练</span>
        </label>

        <label for="lang-js">
          <input type="checkbox" name="languages[]" id="lang-js" value="js">
          JavaScript
          <span class="ui-li-count">熟练</span>
        </label>
      </fieldset>
    </div>

    <div data-role="footer">
      <h4>www.example.com</h4>
    </div>
  </div>

  <script>
    // 初始化控制组
    $("fieldset[data-role='controlgroup']").controlgroup();

    // 默认选中C语言
    $('#lang-c').prop('checked', true).checkboxradio('refresh');

    // 监听更改事件
    $("input[name='languages[]']").change(function() {
      // 遍历所有选项
      $('input[name="languages[]"]').each(function() {
        var isChecked = $(this).is(':checked');
        var dataIcon = isChecked ? 'check' : 'false';
        var parent = $(this).closest('.ui-checkbox');
        parent.find('.ui-icon').removeAttr('class').addClass('ui-icon ui-icon-' + dataIcon + ' ui-widget-icon-fa ui-corner-all');
      });
    });
  </script>
</body>
</html>

以上就是使用jQuery Mobile制作迷你垂直复选框控制组的完整攻略，希望对你有所帮助。

Tags: