文件jquery下载

第1章编写第一个jQueryMobile项目在开始阅读本书之前,读者想必已经对于jQueryMobile是什么,它有什么样的历史以及其功能和目标这些内容有所掌握.
那么从现在开始,首先去尝试建立第一个jQueryMobile网站(也就是网页),以检验它的易用性.
本章内容将会涵盖如下几个部分:创建简单的HTML页面.
向页面中添加jQueryMobile.
使用自定义数据属性(data-*).
更新HTML,使jQueryMobile能够识别数据属性.
重要提示本章的所有源代码包含在从GibHub所下载的ZIP文件的c1文件夹中.
如果想要自己编写代码,这里建议使用与之类似的文件名.
1.
1创建HTML页面首先从一个简单的Web页面开始,先不对移动设备进行优化.
但也不意味着移动设备不能浏览该页面,只是它在移动设备上可能不怎么好用,可能会难以阅读(文本太小),又或者太宽了;在触摸屏上也许不能够很好地使用表单.
因此在开始测试之前并不清楚将会遇到什么样的问题(还将会在移动设备上测试所有的站点,确保其能正常运行).

先看一看下面的代码段:代码清单1-1WelcomeWelcometoourfirstmobilewebsite.
It'sgoingtobethebestsiteyou'veeverseen.
Oncewegetsomecontent.
Andabusinessplan.
Butthehardpartisdone!
CopyrightMegacorp©2013正如前面所指出的那样,这段代码很简单.
而这段代码在(桌面)浏览器中最终的显示效果将会如图1-1所示.
图1-1这看起来效果还不错,下面将在移动设备模拟器上查看相应的显示效果,如图1-2所示.
图1-2这样的显示效果相当不理想.
也许读者曾经在自己的移动设备上看到过类似这样的Web页面.
当然,此时可以通过缩放或者双击来增加文本的大小,但是在针对移动设备友好的视图中,最好能够立即呈现这样的效果.
jQueryMobile则应运而生.
1.
2获取jQueryMobile在前言部分就曾经提到过jQueryMobile实际上就是一组文件.
这里并不是去宣扬编写这些文件花了多大的精力,这些东西的功能有多么的强大;而是在强调使用jQueryMobile时,并不需要安装任何专用的工具或者服务器.
只需要下载这些文件,然后包含在页面内容中即可.
如果还觉得这个工作量较大的话,还可以采用另一个更简单的解决方案.
jQueryMobile文件存放在内容分发网络(ContentDeliveryNetwork,CDN)当中.
这是一个可以保证其可在线使用的资源(类似的其他资源也一样).
很多网站已经开始使用CDN来存放文件,也就是说当用户在浏览站点时,他们可能已经缓存了这些资源.
在本书中将使用存放在CDN中的文件,但鉴于目前的这个例子,此时还是要下载并解压所需的文件.
如果在一个无网络的环境中并且想要快速建立一个移动站点时,建议还是先下载这些文件.

可访问网站http://jquerymobile.
com/download来获取这些文件.
该网站上提供了多种选择,这里下载的是ZIP格式的文件,下载完成后解压(在GitHub上也有该ZIP文件).
屏幕截图1-3显示了解压该ZIP文件后的文件列表.
图1-3技巧:在本书编写时,jQueryMobile即将发布它的最新版本1.
4.
在读者阅读到本书时,有可能已经发布了更新的版本;因此需要注意图1-3中的文件名在新版本中显示的可能不一样.
注意在ZIP文件中包含了jQueryMobile的CSS文件和JavaScript文件,以及这两个文件的简化版本.
这使得在开发应用程序时,可以选择使用常规版本;而在生产环境中则选择使用精简版本.
另外,CSS在生成优化的移动页面时,会用到images目录中的5张图片.
在此目录中还将看到该框架的演示、主题和结构文件(本书用不到这些内容).
因此,本书其余的部分讨论到的整个框架以及所有的功能将会组成一个包含6个文件的框架.
当然,这还需要包含jQuery库,可以单独在www.
jquery.
com网站下载.
编写本书时,jQuery推荐的使用版本是v1.
9.
1.

1.
3自定义下载下载jQueryMobile的最后一个选项是在http://jquerymobile.
com/download-buider上使用一个自定义的DownloadBuilder工具.
目前所发布的是其Alpha版本(还需要进行测试的版本),所生成的较小的文件会减少显示给最终用户所花费的时间.

1.
4实施jQueryMobile下载jQueryMobile后,如何使用这些文件呢将jQueryMobile支持添加到站点中至少需要以下3个步骤:(1)向页面添加HTML5DOCTYPE:.
用于通知浏览器将要处理的内容类型.
(2)添加viewportmetatag:,有助于在移动设备上访问时设置较好的默认页面.
(3)将CSS、JavaScript库和jQuery本身包含在文件中.
在之前的HTML中添加了上述步骤所提到的内容后的代码如下:代码清单1-2:test2.
htmlFirstMobileExampleWelcomeWelcometoourfirstmobilewebsite.
It'sgoingtobethebestsiteyou'veeverseen.
Oncewegetsomecontent.
Andabusinessplan.
Butthehardpartisdone!
CopyrightMegacorp©2013除了增加的DOCTPYE、CSS链接和两个JavaScript库以外,其中大部分内容与代码清单1-1完全相同.
需要注意的是,在这里指明了jQuery库的托管版本.
这样可以混合使用本地和远程的JavaScript文件.
如果确定可以脱机工作时,可以下载jQuery库来使用.

由于在body标签内的代码没有做什么更改,因此在浏览器中查看效果也没有什么变化.
在iOS系统的移动设备中浏览该页面的效果,如图1-4所示.
此时可以看到几个不同的地方.
最大的差异是文本的大小.
截图中的字体大小易于阅读.
正如前面所提到的,浏览上一个版本的页面时用户可以使用缩放进行放大,但很多手机用户也许不知道这个功能.
而这个页面在移动设备上加载时就可以显示合适的字体大小.