如何使用 jQuery Mobile Square-UI 主题插件设计移动端表单控件?
对于自定义表单控件而言，让网页移动友好是一项颇具挑战性的任务。jQuery 提供了许多选项，方便我们完成这项任务。由于智能手机如今非常流行，因此能够创建具有视觉吸引力的自定义表单控件至关重要。JavaScript 的 jQuery 库可以帮助构建响应式且引人入胜的设计。在本文中，我们将学习如何使用 jQuery Mobile Square-UI 主题插件设计移动端表单控件。
示例
此代码演示了如何使用 jQuery Query Mobile Square-UI 主题插件设计移动端表单。我们首先使用 HTML 标准元素在代码中包含必要的库和样式表。我们使用 script 标签来包含 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>
使用字段集创建表单控件
字段集充当一组控件的容器。我们可以使用复选框、单选按钮等在此标签下创建自定义表单控件。使用此字段集的主要优点是将相关的表单控件分组并提供可视化的语义表示。
示例
我们在以下代码中使用了字段集标签来创建自定义表单控件。我们使用 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>
结论
使用 jQuery Mobile Square-UI 主题插件设计移动表单是提升移动应用用户体验的简单有效方法。如果使用纯 CSS 实现同样的效果，则需要编写更多代码。我们强烈建议读者深入了解 Square-UI 主题插件，以便更好地理解该主题。
