8.4　在页面上的一个窗口中打开页面

打开新窗口可能有些问题。不仅很多浏览器试图阻止弹出式窗口，而且和很多设计者一样，我们也不喜欢不能够真正控制浏览器窗口外观这个事实。如果只是想要一种干净、简单的方式来显示一个新的Web页面，而又不退出当前的页面，该怎么办呢？当然是使用JavaScript，通过使用JavaScript为页面添加一个iframe并且在该iframe中显示另一个Web页面，我们可以创建一个包含窗口的页面效果。最终的效果就好像是链接页面直接浮动在当前页面的上方（如图8-2所示）。

图　8-2　可以使用FancyBox jQuery插件快速地创建“位于页面中的一个页面”的效果

＜iframe＞（inline frame的缩写形式）类似于老式的HTML frame，但是，你可以在页面的HTML中的任何地方插入一个iframe。通过设置iframe的尺寸并指定一个src属性（一个Web页面地址），你可以加载另一个Web页面，以便它看上去像是当前页面的一部分。为了使这个过程更容易，你可以使用一个jQuery插件来处理所有繁琐的工作，这样，你就可以集中精力关注设计了。

实际上，在第7章中，我们就已经可以使用一个插件来做这些工作了，这就是FancyBox。在第7章中，我们使用FancyBox来创建一个图像集，还可以使用它的弹出窗口的优点，显示自己的站点或者Web上的任何其他站点的整个Web页面。

注意：可以从http：//www.w3schools.com/tags/tag_iframe.asp了解关于iframes的更多知识。＜iframe＞对于HTML 4.01严格版或XHTML 1.0严格版来说，不是有效的标签。然而，Greybox插件使用JavaScript添加＜iframe＞标签，因此，实际的HTML可以通过验证。此外，既然HTML 5支持＜iframe＞标签，所有主流的浏览器将来都将继续支持它。

使用FancyBox在一个页面中显示链接，几乎与本书7.4节介绍的使用该插件制作图像集相同。概括起来，步骤如下：

1.从http：//fancybox.net下载FancyBox文件。

参见本书7.4.1节步骤2，以了解所需文件的详细信息。

2.把FancyBox CSS文件添加到Web页面。

FancyBox使用一些奇特的CSS来实现页面中的一个页面的外观，并且没有该文件的话，将无法正确显示或运行。

3.添加JavaScript文件。

当然，FancyBox需要jQuery以及其自己的外部JavaScript文件，因此，要将这些添加到页面。例如：

＜script src="js/jquery-1.6.3.min.js"＞＜/script＞

＜script src="fancybox/jquery.fancybox-1.3.4.js"＞＜/script＞

正如本书7.4.3节所述，当打开或关闭屏幕上的Web页面的时候，如果想要添加更为有趣的效果，你可能还想要使用jQueryeasing插件。

4.对于任何想要在页面上的一个弹出窗口中打开的链接，添加class="iframe"。

由于FancyBox需要在＜iframe＞标签中打开外部Web页面（这对一个简单的图像集来说不是必须的），你需要标识需要iframe的链接。做到这点的最容易的方法是，直接给每个链接添加一个class="iframe"，如下所示：

＜a href="http：//www.google.com"class="iframe"＞Google＜/a＞

5.添加＜script＞标签、jQuery ready（）函数，并且调用FancyBox。

＜script＞

$（document）.ready（function（）{

$（'.iframe'）.fancybox（）；

}）；//end ready

＜/script＞

正如你在第7章中所了解到的，FancyBox真的很容易使用：实际上只需要一行代码。在这个例子中，由于对每个链接都应用了类iframe，因此你可以使用jQuery选择器$（'.iframe'）。

6.插入一个对象直接量，其中带有想要弹出的窗口的宽度和高度。

FancyBox接收许多意义不同的设置。正如你在本书7.4.3节所了解到的，通过给fancybox（）函数传递一个对象直接量，你可以控制效果运行的速度、页面重叠时候的透明度，以及更多内容。通常，对于图像来说，弹出窗口的高度和宽度是由图像的大小来确定的。在链接的页面的例子中，没有设置大小，因此，你需要提供一个width值和一个height值。例如，假设你想要让弹出窗口成为760像素宽和400像素高，可以在步骤5中添加如下粗体所示的代码：

＜script＞

$（document）.ready（function（）{

$（'.iframe'）.fancybox（{

width：760，

height：400

}）；//end fancybox

}）；//end ready

＜/script＞

也可以使用百分比值，以便该窗口是整个浏览器窗口的宽度和高度的一个百分比，这是一种好办法，可以让该窗口充分利用一些访问者使用大屏幕的优点，而且对于较小的屏幕来说也很合适。除了使用数字，还需要对width和height使用一个字符串值，以便可以包含一个%符号，如下所示：

＜script＞

$（document）.ready（function（）{

$（'.iframe'）.fancybox（{

width：’85%’，

height：’75%’

}）；//end fancybox

}）；//end ready

＜/script＞

教程：在页面中打开一个页面

在本教程中，我们将真正实践一次Fanc yBox插件，将其应用到页面并定制其外观。

注意：参见1.3节中的“注意”部分以获取如何下载教程文件的信息。

1.在文本编辑器中打开chapter08目录下的文件in-page-links.html。

读到本书这里的时候，你可能已经对录入代码感觉累了，因此，这个文件给出了到FancyBox样式表的一个链接、加载jQuery和FancyBox插件的script标签，以及带有$（document）.ready（）函数的一个＜script＞标签。第一步是标记出你想要在页面的窗口中打开的链接。

2.找到第一个链接＜a href="http：//www.google.com/"＞Search Google＜/a＞，并且添加class="iframe"以使得代码如下所示：

＜a href="http：//www.google.com/"class="iframe"＞Search Google＜/a＞

和本书7.4.1节介绍的FancyBox图像集一样，你可以通过给这个＜a＞标签添加一个title属性，从而给弹出窗口添加标题。

3.给步骤2中所编辑的链接添加title="Google"，从而使其如下所示：

＜a href="http：//www.google.com/"class="iframe"title="Google"＞Search Google＜/a＞

|现在，只需要类似地设置其他的链接。

4.对于后续的4个链接，重复步骤2和步骤3。

对于t i t l e属性，使用链接中的文本（或者自己整理）。现在，可以把FancyBox应用于这些链接了。

5.在靠近文件顶部的地方单击$（document）.ready（）函数后面的空行，并且添加如下第3行到第7行所列的代码：

1＜script＞

2$（document）.ready（function（）{

3$（'.iframe'）.fancybox（{

4 width：’90%’，

5 height：’90%’，

6 titlePosition：'outside'

7}）；//end fancybox

8}）；end ready（）

9＜/script＞

这里，width和height设置为90%，以便弹出窗口会根据访问者的浏览器窗口而调整。titlePosition选项（参见本书7.4.3节）将该标题放到了弹出窗口之外。

6.保存该页面，并且在Web浏览器中预览。单击那些链接。

这些链接在一个弹出窗口中打开。很漂亮。可以使用7.4.3节所讨论的任何其他的FancyBox选项来修改该页面的外观：修改覆盖颜色、在打开和关闭链接的时候增加一个放大和缩小效果，并且修改Close按钮。文件complete_in-page-links.html包含了这个教程的最终版本。

注意：本书之前的版本包含了关于创建“较大的链接”的一个部分，也就是说，这个链接包含了诸如div、标题和段落这样的一个块级元素。这一技术使得你可以创建一个较大的、可单击的目标，还带有翻滚的效果。你不再需要JavaScript来做这些事情。HTML5（以及所有当前的浏览器）允许你用＜a＞标签来包含任何包含了div的块级元素。