您的位置：首页 > Web前端 > JQuery

jQuery Mobile 表单基础

2016-07-20 21:36 483 查看

1、jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。在 jQuery Mobile 中，您可以使用下列表单控件：文本输入框、搜索输入框、单选按钮、复选框、选择菜单、滑动条、翻转拨动开关

当使用 jQuery Mobile 表单时，您应当知道：

（1）、<form> 元素必须有一个 method 和一个 action 属性

（2）、每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现

（3）、每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="fname">姓名：</label>
<input type="text" name="fname" id="fname">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>




如需隐藏标签，请使用 class ui-hidden-accessible。这在您把元素的 placeholder 属性作为标签时经常用到：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="fname" class="ui-hidden-accessible">姓名：</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>




提示： 我们可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<p>在输入框中输入内容，查看输入框右侧是否出现 X 图标：</p>
<label for="fname">姓名</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">
</form>
</div>
</div>
</body>
</html>




清除输入框的按钮可以在 <input> 元素中使用，但不能在 <textarea> 中使用。 搜索框中 data-clear-btn 默认值为 "true" ，你可以使用 data-clear-btn="false" 移除该图标。

2、jQuery Mobile 表单图标

表单中的按钮代码是标准的 HTML <input> 元素 (button, reset, submit)。他们会自动渲染样式，可以自动适配移动设备与桌面设备：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="fname">写下你的姓名并提交：</label>
<input type="text" name="fname" id="fname">
<input type="button" value="无效按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
</form>
</div>
</div>
</body>
</html>




如果需要在 <input> 按钮中添加额外的样式，可以使用下表中的 data-* 属性：

属性

值

描述

data-corners

true | false

指定按钮是否有圆角

data-icon

图标参考手册

指定按钮图标

data-iconpos

left | right | top | bottom | notext

指定图标位置

data-inline

true | false

指定是否内联按钮

data-mini

true | false

指定是否为迷你按钮

data-shadow

true | false

指定按钮是否添加阴影效果

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="fname">姓名</label>
<input type="text" name="fname" id="fname">
<input type="submit" value="提交" data-icon="check" data-iconpos="right" data-inline="true">
</form>
</div>
</div>
</body>
</html>




3、字段容器

如需让标签和表单元素看起来更适应宽屏，请用带有 "ui-field-contain" 类的 <div> 或 <fieldset> 元素包围 label/form 元素：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fname">名:</label>
<input type="text" name="fname" id="fname">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
</div>
<input type="submit" data-inline="true" value="提交">
</form>
<p> "ui-field-contain" 类 基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。</p>
<p>请尝试调整窗口的尺寸来查看效果。</p>
</div>
</div>
</body>
</html>




提示：为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" />
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form method="post" action="demoform.php">
<label for="fname">姓 （已设置 data-role="none"）：</label>
<input type="text" name="fname" id="fname" data-role="none">
<label for="fname">名 （未设置 data-role="none"）：</label>
<input type="text" name="fname" id="fname">
<input type="submit" data-inline="true" value="提交">
</form>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航