jQuery Mobile 表单基础
2016-07-20 21:36
543 查看
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>
相关文章推荐
- javascript jquery對form元素的常見操作
- jQuery Mobile 列表过滤
- jQuery Mobile 列表视图
- jQuery makeArray对标签或json转变成数组
- jQuery Mobile 列表内容
- jquery 杂文
- jQuery Mobile 网格
- jQuery Mobile 表格
- jQuery Mobile 可折叠块
- jQuery Mobile 面板
- jQuery Mobile 导航栏
- jQuery Mobile 工具栏
- jQuery Mobile 弹窗
- jQuery Mobile 按钮图标
- jQuery Mobile 按钮
- jQuery Mobile 过渡
- jQuery Mobile 页面
- JQuery easyUI datagrid 多选下禁止选中某些行
- Jquery中用得比较少的核心函数
- jQuery在IE7和8下setInterval失效的问题