jQuery Mobile 1.2更新一览 更好的表单调整机制

  次阅读 作者:智能小宝 来源:互联网 2016-01-19 11:21 我要评论(0)

在本文中,我将带大家一起体验jQuery开发团队刚刚发布jQuery Mobile 1.2新版本给开发者带来的新工具,并对可能给jQuery Mobile应用程序带来影响的增强功能逐一加以剖析。

教程说明

难度级别: 普通

操作时间: 15 分钟

【51CTO独家译文】不久前,jQuery开发团队刚刚发布jQuery Mobile 1.2,新版本带来了多项堪称神奇的变化。在本文中,我将带大家一起体验新版本给开发者带来的新工具,并对可能给jQuery Mobile应用程序带来影响的增强功能逐一加以剖析。闲话少叙,咱们马上开始。

在开始之前,进行下载自然是首要工作。大家可以访问jQuery Mobile官方下载页面,并根据自己的 需求选择要下载的项目。当然,直接使用下文所提供的样板代码也是可行的。

另外,我们在开始之前再聊几句由jQuery Mobile团队提供的下载生成器。尽管仍处于测试阶段,但这款工具已经允许用户任何选择想要下载的jQuery Mobile项目。无论是特殊事件、转移、表单元素还是窗口部件,只要大家觉得用不上,都可以从下载列表中取消掉。这一设定对于那些专注于打造高性能应用 程序的开发者朋友来说还是很有意义的。

各类组件

组件是任何一款jQuery Mobile应用程序的真正核心,可以说正是它们构成了最直观的的页面内容以及用户交互必不可少的操作内容。jQuery Mobile团队在各类组件的创建、测试及改进工作上花费了无数个小时,借以确保这些小工具能够以最佳状态满足使用者的需要。在1.2版本中,开发团队抛 出了一款令所有开发者为之疯狂、同时也期盼已久的组件:弹出模块。

弹出模块

弹出模块可以被看作是覆盖于其它页面及内容之上的一小块独立页面,它们一般被用于显示工具提示、照片、地图及其它额外内容。这类信息虽然并没有重要 到值得额外开启新页面,但对用户来说仍然是种不可或缺的描述及说明机制。jQuery Mobile 1.2在弹出模块的实现方面堪称完美,下面我们将一同学习如何快速为应用程序添加弹出模块项目。

提醒各位,为了方便起见,后文中所使用的所有代码都将使用以下HTML样板。jQuery Mobile CSS及JS文件(包括jQuery)也通过jQuery CDN给出了链接,目的在于最大程度简化代码内容。

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery Mobile 1.2</title>

<link rel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

<div data-role="content">

<!-- your content goes here -->

</div>

</body>

</html>

在应用程序中添加弹出页面需要分两个步骤进行。首先,大家需要设定一些条件来触发弹出模块,通常情况下我们可以使用链接、按钮或者其它什么能与用户 交互的视觉元素。要触发对应元素,我们要为其添加以下属性:

data-rel="popup"

接下来,我们还需要设定显示内容。内容多种多样,从div、菜单、表单甚至是照片都能实现。内容元素也要有自己的属性:

data-role="popup"

最后,对于简单的链接按钮,其href属性必须与显示内容的id相吻合。下面我们将以上步骤汇总起来,看看完整的实现过程:

<a href="#simplepopup" data-rel="popup">Open Popup</a>

<div data-role="popup" id="simplepopup">

<p>This is a completely basic popup, no options set.<p>

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...