使用JavaScript开发HTML5应用.doc

项目5：使用JavaScript

JavaScript的速度和威力正呈几何数量增长。所有现代的浏览器，包括谷歌的Chrome，Mozilla的火狐，苹果的Safari和微软的IE，都能以接近机器码级的水平执行JavaScript脚本。加之，像W3C和WASP这样的标准化组织的推广，确保了JavaScript能一致地运行在各种浏览器上。

Ajax库是演示JavaScript有效地运行于各浏览器的极好例子。在最后的项目中，你将学习扩展一个流行的Ajax库，jQuery，用它创建一个简单的Lightbox效果的产品照片库。

使用jQuery

有许多用来快速扩展网站的Ajax库。这个项目需要在站点HYPERLINK"http://www.visualizingtheweb.com"www.visualizingtheweb.com上下载文件。你会看到在下载文件包里有两个Ajax库：jQuery和Spry。这两个库都是开源的。第一个库jQuery，可以说是最流行的Ajax库。你能从HYPERLINK"http://www.jquery.com"www.jquery.com签出它，从而得到详细的关于怎样使用这个库的信息。第二个库Spry，是由Adobe开发并管理的一个开源项目（图5.1Proj）。Adobe的Web开发工具，Dreamweaver，现已原生支持Spry。

由于jQuery核心脚本允许被扩展，所以有成百的jQuery扩展被开发并被提供。使用JavaScript开发的jQuery扩展代码是难以保护的。因此，你会发现大多数jQuery扩展是作为开源项目被管理的。

242项目5：使用JavaScript

图5.1Proj在Adobe网站上的Ajax框架Spry。


开发一个Lightbox式的图片
管理工具

Lightbox效果增强了屏幕操作。传统上，如果在网页上有个图片，你要么提供完整的图片，要么提供一个链到大图片的链接。Lightbox效果添加一个缩略图到页面（图5.2Proj）。

当你选定缩略图时，主页面变暗并加载大图片（图5.3Proj）。导航按钮使你可以依次查看图库中的图片。关键在于，你永远不用离开你所在的页面。

整个Lightbox的创建，需要用到图片组合，jQuery库，定制J的avaScript脚本，CSS和HTML。

创建图片

这个项目的第一步是创建所需的缩略图片和完全尺寸的图片（图5.4Proj）你可以使用所喜爱的编辑工具，如Photoshop，GIMP，或ExpressionDesign。来编辑原始图片文件，并创建72像素乘72像素的缩略图。

图5.2Proj这个页面包含一个Lightbox效果。每个缩略图都能被选中。

图5.3Proj这个Lightbox效果用来放大每个图片。

243
244项目5：使用JavaScript

图5.4Proj你需要创建在Lightbox照片库中要显示的图片的完全尺寸的大图和缩略图。


在你的网站中创建一个名为Photos的子文件夹。放你的缩略图和完全尺寸的大图到这个新建的文件夹。

第二个文件夹，名为Images，包含所有用于依次移动图片的导航按钮的图片文件。

使用JavaScript

创建Lightbox功能的最复杂的部分是需要创建JavaScript库。

在同一文件夹内创建一个名为JS的新文件夹，包含网站中的所有js文件。从网站HYPERLINK"http://www.jquery.com"www.jquery.com上下载最新版的jQuery库，并把它放到JS文件夹。本项目的下载文件中已包含一个版本的jQuery。

创建一个新的名为“lightbox.js”的JavaScript文件。并用你喜爱的文本编辑器打开这个“lightbox.js”文件。你需要添加如下的JavaScript脚本。并且你会看到一个$符号的使用。这是一个连接到jQuery对象的别名。

(function($){

$.fn.lightBox=function(settings){
项目5：使用JavaScript245

第一组属性控制Lightbox如何在屏幕上显示。当你选择一个图片时，属性overlayBgColor设置背景色，并且属性overlay-Opa