jQuery技术

jQueryMobile表单结构学习

字号+ 作者:H5之家 来源:H5之家 2017-08-19 14:01 我要评论( )

jQuery Mobile 表单 jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观。 jQueryMobile 使用 CSS 来设置 HTML 表单元素的样式,以使其更有吸引力更易用

  jQuery Mobile 表单 jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观。 jQueryMobile 使用 CSS 来设置 HTML 表单元素的样式,以使其更有吸引力更易用。下面,小编为大家搜索整理了jQueryMobile表单结构学习,希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网!

jQueryMobile表单结构学习

  jQuery Mobile 表单结构

  jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其更有吸引力更易用。

  在 jQuery Mobile 中,您可以使用以下表单控件:

  文本框

  搜索框

  单选框

  复选框

  选择菜单

  滑动条

  翻转切换开关

  当您与 jQuery Mobile 表单打交道时,应该了解以下信息:

  元素必须设置 method 和 action 属性

  每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。

  每个表单元素必须有一个标记(label)。请设置 label 的 for 属性来匹配元素的 id。

  实例

  method="post" action="demoform.asp">

  for="fname">First name:

  id="fname">

  亲自试一试

  如需隐藏 label,请使用类 ui-hidden-accessible。这很常用,当您需要元素的 placeholder 属性充当 label 时:

  实例

  class="ui-hidden-accessible">姓名:

  亲自试一试域容器

  如果需要 label 和表单元素在宽屏幕上显示正常,请用带有 data-role="fieldcontain" 属性的

  或元素来包装 label 或表单元素:

  实例

  First name:

  Last name:

  亲自试一试

  提示:fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时,它会自动将 label 与表单控件放置于同一行。当小于 480px 时,label 会被放置于表单元素之上。

  提示:如需避免 jQuery Mobile 自动为可点击元素设置样式,请使用 data-role="none" 属性:

  实例

  First name:

  data-role="none">

  亲自试一试

  在 jQuery Mobile 中提交表单

  提示:jQuery Mobile 会自动通过 AJAX 进行表单提交,并会尝试将服务器响应整合入应用程序的 DOM 中。

jQueryMobile表单结构学习

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 大一学习JqueryMobile报错404

    大一学习JqueryMobile报错404

    2017-08-16 13:05

  • jQuery1.9.1--结构及$方法的工作原理源码分析

    jQuery1.9.1--结构及$方法的工作原理源码分析

    2017-08-11 18:00

  • jquery-mobile 学习笔记之二(表单创建)

    jquery-mobile 学习笔记之二(表单创建)

    2017-08-04 12:06

  • 用jquery屏蔽退格键(也就是删除键),使用户在表单内输入内容时不

    用jquery屏蔽退格键(也就是删除键),使用户在表单内输入内容时不

    2017-07-06 13:02

网友点评
t