第1章编写第一个jQueryMobile项目_第1页
第1章编写第一个jQueryMobile项目_第2页
第1章编写第一个jQueryMobile项目_第3页
第1章编写第一个jQueryMobile项目_第4页
第1章编写第一个jQueryMobile项目_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

·PAGE8·jQuery移动Web开发（第2版）·PAGE7·第1章编写第一个jQueryMobile项目第1章编写第一个jQueryMobile项目在开始阅读本书之前，读者想必已经对于jQueryMobile是什么，它有什么样的历史以及其功能和目标这些内容有所掌握。那么从现在开始，首先去尝试建立第一个jQueryMobile网站（也就是网页），以检验它的易用性。本章内容将会涵盖如下几个部分：创建简单的HTML页面。向页面中添加jQueryMobile。使用自定义数据属性（data-*）。更新HTML，使jQueryMobile能够识别数据属性。重要提示本章的所有源代码包含在从GibHub所下载的ZIP文件的c1文件夹中。如果想要自己编写代码，这里建议使用与之类似的文件名。1.1创建HTML页面首先从一个简单的Web页面开始，先不对移动设备进行优化。但也不意味着移动设备不能浏览该页面，只是它在移动设备上可能不怎么好用，可能会难以阅读（文本太小），又或者太宽了；在触摸屏上也许不能够很好地使用表单。因此在开始测试之前并不清楚将会遇到什么样的问题（还将会在移动设备上测试所有的站点，确保其能正常运行）。先看一看下面的代码段：代码清单1-1<h1>Welcome</h1><p>Welcometoourfirstmobilewebsite.It'sgoingtobethebestsiteyou'veeverseen.Oncewegetsomecontent.Andabusinessplan.Butthehardpartisdone!</p><p> <i>CopyrightMegacorp©2013</i></p></body></html>正如前面所指出的那样，这段代码很简单。而这段代码在（桌面）浏览器中最终的显示效果将会如图1-1所示。图1-1这看起来效果还不错，下面将在移动设备模拟器上查看相应的显示效果，如图1-2所示。图1-2这样的显示效果相当不理想。也许读者曾经在自己的移动设备上看到过类似这样的Web页面。当然，此时可以通过缩放或者双击来增加文本的大小，但是在针对移动设备友好的视图中，最好能够立即呈现这样的效果。jQueryMobile则应运而生。1.2获取jQueryMobile在前言部分就曾经提到过jQueryMobile实际上就是一组文件。这里并不是去宣扬编写这些文件花了多大的精力，这些东西的功能有多么的强大；而是在强调使用jQueryMobile时，并不需要安装任何专用的工具或者服务器。只需要下载这些文件，然后包含在页面内容中即可。如果还觉得这个工作量较大的话，还可以采用另一个更简单的解决方案。jQueryMobile文件存放在内容分发网络（ContentDeliveryNetwork，CDN）当中。这是一个可以保证其可在线使用的资源（类似的其他资源也一样）。很多网站已经开始使用CDN来存放文件，也就是说当用户在浏览站点时，他们可能已经缓存了这些资源。在本书中将使用存放在CDN中的文件，但鉴于目前的这个例子，此时还是要下载并解压所需的文件。如果在一个无网络的环境中并且想要快速建立一个移动站点时，建议还是先下载这些文件。可访问网站/download来获取这些文件。该网站上提供了多种选择，这里下载的是ZIP格式的文件，下载完成后解压（在GitHub上也有该ZIP文件）。屏幕截图1-3显示了解压该ZIP文件后的文件列表。图1-3技巧：在本书编写时，jQueryMobile即将发布它的最新版本1.4。在读者阅读到本书时，有可能已经发布了更新的版本；因此需要注意图1-3中的文件名在新版本中显示的可能不一样。注意在ZIP文件中包含了jQueryMobile的CSS文件和JavaScript文件，以及这两个文件的简化版本。这使得在开发应用程序时，可以选择使用常规版本；而在生产环境中则选择使用精简版本。另外，CSS在生成优化的移动页面时，会用到images目录中的5张图片。在此目录中还将看到该框架的演示、主题和结构文件（本书用不到这些内容）。因此，本书其余的部分讨论到的整个框架以及所有的功能将会组成一个包含6个文件的框架。当然，这还需要包含jQuery库，可以单独在网站下载。编写本书时，jQuery推荐的使用版本是v1.9.1。1.3自定义下载下载jQueryMobile的最后一个选项是在/download-buider上使用一个自定义的Download

Builder工具。目前所发布的是其Alpha版本（还需要进行测试的版本），所生成的较小的文件会减少显示给最终用户所花费的时间。1.4实施jQueryMobile下载jQueryMobile后，如何使用这些文件呢？将jQueryMobile支持添加到站点中至少需要以下3个步骤：（1）向页面添加HTML

5DOCTYPE：<!DOCTYPEhtml>。用于通知浏览器将要处理的内容类型。（2）scale="1">，有助于在移动设备上访问时设置较好的默认页面。（3）将CSS、JavaScript库和jQuery本身包含在文件中。在之前的HTML中添加了上述步骤所提到的内容后的代码如下：代码清单1-2：test2.html<!DOCTYPEhtml><html><head><title>FirstMobileExample</title><metaname="viewport"content="width=device-width,initialscale=1"><linkrel="stylesheet"href="jquery.mobile-1.3.2.min.css"/><scripttype="text/javascript"src="/jquery-1.9.1.min.js"></script><scripttype="text/javascript"src="jquery.mobile-1.3.2.min.js"></script></head><body><h1>Welcome</h1><p>Welcometoourfirstmobilewebsite.It'sgoingtobethebestsiteyou'veeverseen.Oncewegetsomecontent.Andabusinessplan.Butthehardpartisdone!</p><p><i>CopyrightMegacorp©2013</i></p></body></html>图1-4除了增加的DOCTPYE、CSS链接和两个JavaScript库以外，其中大部分内容与代码清单1-1完全相同。需要注意的是，在这里指明了jQuery库的托管版本。这样可以混合使用本地和远程的JavaScript文件。如果确定可以脱机工作时，可以下载jQuery库来使用。图1-4由于在body标签内的代码没有做什么更改，因此在浏览器中查看效果也没有什么变化。在iOS系统的移动设备中浏览该页面的效果，如图1-4所示。此时可以看到几个不同的地方。最大的差异是文本的大小。截图中的字体大小易于阅读。正如前面所提到的，浏览上一个版本的页面时用户可以使用缩放进行放大，但很多手机用户也许不知道这个功能。而这个页面在移动设备上加载时就可以显示合适的字体大小。

1.5使用数据属性1.3节的例子中只是向页面添加了jQueryMobile来获得移动支持。但是要在移动设备上访问该页面，还有很多事情需要做。在书中介绍jQueryMobile的使用时，需要用到各种不同的数据属性来标记页面，使jQueryMobile能够理解其含义。那么在这里不禁会问，究竟数据属性是什么？<divid="mainDiv"data-ray="moo">Somecontent</div>在前面的HTML代码中，data-ray属性完全是随意定义的。不过，由于数据属性是以data-开头的，所以这也完全合法。在浏览器中浏览时，并没有内容。重点是这些数据属性要和其他的代码，例如JavaScript等进行整合。如可以编写JavaScript代码用于查找DOM中属性为data-ray的条目，然后将其背景颜色改为所设置的其他值。jQueryMobile会广泛地使用数据属性，包括标记（创建微件）和行为（控制链接被点击后的响应）等。下面来看看jQueryMobile数据属性其中的一个主要用途定义页面、页眉、内容和页脚：代码清单1-3：test3.html<!DOCTYPEhtml><html><head><title>FirstMobileExample</title><linkrel="stylesheet"href="jquery.mobile-1.3.2.min.css"/><scripttype="text/javascript"src="/jquery-1.9.1.min.js"></script></script></head><body><divdata-role="page"><divdata-role="header"><h1>Welcome</h1></div><divdata-role="content"><p>Welcometoourfirstmobilewebsite.It'sgoingtobethebestsiteyou'veeverseen.Oncewegetsomecontent.Andabusinessplan.Butthehardpartisdone!</p></div><divdata-role="footer"><h4>CopyrightMegacorp©2013</h4></div></div></body></html>与之前的代码清单1-2相比较，这段代码的主要差别是添加了用于定义页面的div块。所有的内容都封装在body标签内。在body标签中，有3个单独的div块，一个用于页眉，一个用于正文，最后一个用于页脚。所有的块都使用data-role属性，该属性为每个块定义一个角色。正如前面所说，这些数据属性对浏览器本身没什么意义。不过在这里应该来看看在jQueryMobile中碰到这些标记时会如何进行处理，如图1-5所示。图1-5可能通过图1-5已经注意到了页眉和页脚的背景颜色都被设置为了黑色。相比于其他内容，它们就显眼很多。至于正文，页面中的文本之间和它上下都留有一点空白。一旦div标签

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论