jQueryMobile表单设计全攻略

jQuery Mobile 表单基础

jQuery Mobile 提供了丰富的表单组件，包括输入框、复选框、单选按钮、选择菜单等。这些组件默认具有响应式设计，适合移动设备使用。

表单基本结构示例：

<form>
  <div data-role="fieldcontain">
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name">
  </div>
</form>

文本输入控件

jQuery Mobile 对标准 HTML 输入元素进行了增强，使其在移动设备上显示更友好。

文本输入示例：

<div data-role="fieldcontain">
  <label for="email">邮箱:</label>
  <input type="email" name="email" id="email">
</div>

<div data-role="fieldcontain">
  <label for="password">密码:</label>
  <input type="password" name="password" id="password">
</div>

单选按钮和复选框

jQuery Mobile 提供了样式化的单选按钮和复选框，使用户在触摸设备上更容易操作。

单选按钮组示例：

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>性别:</legend>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">男</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">女</label>
  </fieldset>
</div>

复选框示例：

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>兴趣爱好:</legend>
    <input type="checkbox" name="hobby" id="reading" value="reading">
    <label for="reading">阅读</label>
    <input type="checkbox" name="hobby" id="sports" value="sports">
    <label for="sports">运动</label>
  </fieldset>
</div>

选择菜单

jQuery Mobile 的选择菜单在移动设备上会自动转换为原生选择控件，提供更好的用户体验。

基本选择菜单示例：

<div data-role="fieldcontain">
  <label for="city">城市:</label>
  <select name="city" id="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
</div>

多选菜单示例：

<div data-role="fieldcontain">
  <label for="languages">掌握语言:</label>
  <select name="languages" id="languages" multiple="multiple" data-native-menu="false">
    <option value="java">Java</option>
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
  </select>
</div>

滑块和开关控件

jQuery Mobile 提供了滑块和开关控件，适合需要范围选择或开关状态的场景。

滑块控件示例：

<div data-role="fieldcontain">
  <label for="volume">音量:</label>
  <input type="range" name="volume" id="volume" min="0" max="100" value="50">
</div>

开关控件示例：

<div data-role="fieldcontain">
  <label for="switch">通知:</label>
  <select name="switch" id="switch" data-role="slider">
    <option value="off">关闭</option>
    <option value="on">开启</option>
  </select>
</div>

表单提交和处理

jQuery Mobile 表单提交可以通过 AJAX 实现无刷新页面更新。

表单提交示例：

<form id="myForm" data-ajax="false">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

<script>
$(document).on("pagecreate", function() {
  $("#myForm").on("submit", function(e) {
    e.preventDefault();
    var formData = $(this).serialize();
    $.post("submit.php", formData, function(response) {
      alert("提交成功");
    });
  });
});
</script>

表单验证

jQuery Mobile 可以与 HTML5 验证属性结合使用，提供客户端验证功能。

表单验证示例：

<form id="validateForm">
  <div data-role="fieldcontain">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" required>
  </div>
  
  <div data-role="fieldcontain">
    <label for="userEmail">邮箱:</label>
    <input type="email" name="userEmail" id="userEmail" required>
  </div>
  
  <button type="submit">验证</button>
</form>

<script>
$(document).on("pagecreate", function() {
  $("#validateForm").on("submit", function(e) {
    if(!this.checkValidity()) {
      e.preventDefault();
      alert("请填写所有必填字段");
    }
  });
});
</script>

动态表单更新

jQuery Mobile 提供了方法来动态更新表单控件并刷新显示。

动态更新示例：

<div data-role="fieldcontain">
  <label for="dynamicSelect">动态选择:</label>
  <select name="dynamicSelect" id="dynamicSelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</div>

<button id="updateBtn">更新选项</button>

<script>
$(document).on("pagecreate", function() {
  $("#updateBtn").on("click", function() {
    var newOptions = {
      "3": "新选项1",
      "4": "新选项2",
      "5": "新选项3"
    };
    
    var $select = $("#dynamicSelect");
    $select.empty();
    
    $.each(newOptions, function(value, text) {
      $select.append($("<option></option>").val(value).text(text));
    });
    
    $select.selectmenu("refresh");
  });
});
</script>

主题和样式定制

jQuery Mobile 表单控件可以通过 data-theme 属性应用不同的主题样式。

主题应用示例：

<div data-role="fieldcontain">
  <label for="themedInput">主题输入:</label>
  <input type="text" name="themedInput" id="themedInput" data-theme="b">
</div>

<div data-role="fieldcontain">
  <label for="themedSelect">主题选择:</label>
  <select name="themedSelect" id="themedSelect" data-theme="a">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</div>

通过以上示例，可以全面了解 jQuery Mobile 表单的各种功能和用法。实际开发中可以根据需求组合使用这些组件，创建出适合移动设备的用户友好表单界面。