jQuery 如何使用jQuery Mobile Square-UI主题插件为移动设备设计表单控件

将网页设计为适合移动设备的方式对于自定义表单控件来说是一个具有挑战性的任务。jQuery为我们提供了许多方便的选项来执行这个任务。由于智能手机现在非常流行，因此能够创建具有视觉吸引力界面的自定义表单控件非常重要。JavaScript的jQuery库可以帮助构建响应式和吸引人的设计。在本文中，我们将学习如何使用jQuery移动Square-UI主题插件为移动设备设计表单控件。

示例

这段代码演示了如何使用jQuery Mobile Square-UI主题插件设计移动表单。我们首先使用HTML的标准元素在代码中包含所需的库和样式表。我们使用脚本标签来包含JavaScript代码。我们使用默认选项初始化了Square-UI主题插件。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/flatlogic/square-ui/1.0.1/dist/square-ui.css">
  <style>#myForm{margin:1em;}label{display:block;margin-bottom:.5em;}input[type="text"],select{width:100%;margin-bottom:.5em;}</style>
</head>
<body>
   <div data-role="page">
      <div data-role="main" class="ui-content">
      <form id="myForm">
         <label for="name">Name:</label>
         <input type="text" id="name" name="name">
         <label for="email">Email:</label>
         <input type="text" id="email" name="email">
         <label for="country">Country:</label>
         <button type="submit">Submit</button>
      </form>
    </div>
   </div>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.rawgit.com/flatlogic/square-ui/1.0.1/dist/square-ui.js"></script>
   <script>
       $(document).on("pagecreate",function(){$ .mobile.square.defaults.activeBtnClass="ui-btn-square ui-btn-active";
          $.mobile.square.defaults.activeToggleClass="ui-btn-square ui-btn-active";$ .mobile.square.defaults.checkIcon="fa fa-check";
          $.mobile.square.defaults.radioOnIcon="fa fa-dot-circle-o";$ .mobile.square.defaults.radioOffIcon="fa fa-circle-o";
          $.mobile.square.defaults.sliderClass="ui-slider-square";$ .mobile.square.defaults.sliderHandleClass="ui-btn-up-square";
          $.mobile.square.defaults.sliderHighlightClass="ui-btn-corner-all ui-btn-up-square";$ .mobile.square.defaults.sliderTrackClass="ui-btn-down-square";
          $.mobile.square.defaults.textButtonClass="ui-btn-square";$ .mobile.square.defaults.textButtonActiveClass="ui-btn-square ui-btn-active";
         $.mobile.square.init();
      });
   </script>
</body>
</html>

使用 fieldset 创建表单控件

fieldset 作为一组控件的容器。我们可以在此标签下使用复选框、单选按钮等方式创建自定义表单控件。使用 fieldset 的主要优势是将相关的表单控件分组，并提供语义上的可视化表示。

示例

我们在以下代码中使用了 fieldset 标签来创建自定义表单控件。我们使用了 type 属性将输入框的类型设置为复选框。我们使用了 label 属性定义复选框的标签。

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquerymobile@1.4.5/jquery.mobile.min.css" />
   <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquerymobile@1.4.5/jquery.mobile.min.js"></script>
</head>

<body>
   <div data-role="page">
      <div data-role="header">
         <h3>Example of Fruits Selection</h3>
      </div>
      <div role="main" class="ui-content">
         <fieldset data-role="controlgroup">
            <input type="checkbox" name="fruit[]" id="apple" checked="checked"/>
            <label for="apple">Apple</label>
            <input type="checkbox" name="fruit[]" id="banana" checked="checked"/>
            <label for="banana">Banana</label>
            <input type="checkbox" name="fruit[]" id="orange" checked="checked"/>
            <label for="orange">Orange</label>
         </fieldset>
      </div>
   </div>
</body>
</html>

创建自定义滑动条

滑动条是重要的元素，尤其在处理移动设备的应用程序中。它有很多应用，如设置偏好、过滤和排序、多媒体控制等。

示例

在下面的代码中，我们使用jQuery Mobile Square-UI主题插件创建了一个滑动条。我们将滑动条的默认值设置为50，范围是0到100。我们将输入类型设置为“range”以创建一个滑动条。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css"href="css/jquery.mobile.squareui.css" />
   <script src="js/jquery.js"></script>
   <script src="js/jquery.mobile-1.4.0.min.js"></script>
   <style>
      .section-heading {
         padding: 10px;
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <h2 class="section-heading">Slider example</h2>
   <div data-role="fieldcontain">
      <label for="slider">Slider:</label>
      <input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
   </div>
</body>
</html>

使用可折叠输入字段

可折叠输入字段是现代网站上常见的输入字段。它允许我们分组相关的内容并默认隐藏它们。这样可以使整体用户界面更加互动和有组织。例如，我们可能需要在表单中选择我们的国家。在这种情况下，使用复选框或纯文本作为输入字段会因为可用选项太多而不方便。在这种情况下，我们可以使用可折叠输入字段。

示例

在下面的代码中，我们使用select标签创建可折叠输入字段。option标签作为select标签的子标签。它包含用户可用的所有选项。我们还创建了一个提交按钮。通常，用户在填写完表单后需要提交。

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://cdn.rawgit.com/flatlogic/squareui/1.0.1/dist/square-ui.css">
</head>
<body>
   <form>
      <div data-role="collapsible">
         <h3>Country</h3>
         <div data-role="fieldcontain">
            <label for="country">Country:</label>
            <select id="country" name="country">
               <option value="">-- Select a country --</option>
               <option value="usa">USA</option>
               <option value="canada">Canada</option>
               <option value="australia">Australia</option>
            </select>
         </div>
      </div>
   <button type="submit">Submit</button>
   </form>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.rawgit.com/flatlogic/squareui/ui/1.0.1/dist/square-ui.js"></script>
   <script>
       $(document).on("pagecreate", function() {$ .mobile.square.init();
      });
   </script>
</body>
</html>