使用 Ajax 实现 lightbox

使用 Ajax 技术创建 lightbox 效果、渐变效果、弹出效果和窗口。

文档选项

		打印本页
		将此页作为电子邮件发送
		讨论
		样例代码

级别：初级

Jack D Herrington (jherr@pobox.com), 高级软件工程师, Leverage Software Inc.

2007 年 10 月 29 日

在这个一切都要求新奇的世界中，要吸引用户的注意实属不易。了解如何在 Ajax 工具中使用 lightbox、弹出、窗口和渐变消息之类的新技术吸引用户的目光。

这可能是流传在都市中的一个传奇故事。很多年之前就有人和我说过这样一个用户交互体验。测试者的座位下面塞了 100 美金，而他正在使用计算机中的桌面应用程序。这个应用程序的状态栏中显示了这样一条信息：“在您的座位下面有 100 美金。”可悲的是，没有一个参与者能够发现他座位下面的钱。这个故事告诉我们状态栏传递信息的效率有多低，而且要吸引用户的注意绝非易事。

本文将介绍如何结合 PHP、动态 HTML（DHTML）和异步的 JavaScript + XML（Ajax）为内容增色，从而真正吸引用户的眼球。

请访问 Ajax 技术资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。


			订阅 Ajax 相关文章和教程的 RSS 提要

工具提示

在浏览器中设置状态栏相当简单，但是要实现一些有用的功能（比如说弹出一个工具提示）则不是那么容易。考虑到简单性，我选择使用了一个可从网络上免费获得的工具提示库，它构建于出色的 Prototype.js JavaScript 库之上。清单 1 显示了这个工具提示的代码。

清单 1. index.html

                        <html>
                        <head>
                        <script src="prototype.js" type="text/javascript"></script>
                        <script src="tooltip.js" type="text/javascript"></script>
                        <style>
                        body { font-family: arial,verdana; }
                        .popup { padding:10px; border:1px solid #ccc;
                        background:#eee; width:250px; font-size: small; }
                        </style>
                        </head>
                        <body>
                        <div id="book1">Code Generation In Action</div>
                        <div id="popup1" class="popup">
                        </div>
                        </body>
                        <script type="text/javascript">
                        new Ajax.Updater( 'popup1', 'text.php' );
                        new Tooltip('book1', 'popup1')
                        </script>
                        </html>

该页面首先使用一个 Ajax 调用更新工具提示的内容，方法是使用 Prototype.js 库中的 Ajax.Updater 类。然后再使用工具提示库所提供的 Tooltip 类将工具提示分配给 book1 <div> 标记。

清单 2 显示了该工具提示内容的代码。

清单 2. text.php

                        An excellent book on code generation and generative programming
                        by Jack Herrington.

现在，可以在浏览器中打开页面以查看效果。显示的页面如图 1 所示。

图 1. 鼠标未移到文本上

当我把鼠标移到文本上，页面将弹出一个小窗口，如图 2 所示。

图 2. 弹出窗口

工具提示的动态演示

查看工具提示的在线动态演示。

工具提示是一种整洁的页面呈现方式，并能根据用户的需要显示内容。如果某个用户想了解某项内容的更多信息，只需将鼠标移到该内容上便可显示详细信息。这些详细信息可具有不同的复杂度，可以是图像、表格和格式化数据。

回页首

Lightbox

Lightbox 是一种最前沿的创新方法，可以将用户的注意力集中到页面上的某个特定元素。在下面的示例中，我在页面中添加了一个缩略图，当用户单击它时便会在 “lightbox” 中显示出大图。

要创建这种效果，我将使用极为优秀的 Lightbox JS 2.0 库，它同样构建于 Prototype.js 框架之上。清单 3 显示了示例代码。

清单 3. index.html

                        <html>
                        <head>
                        <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
                        <script src="js/prototype.js" type="text/javascript"></script>
                        <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
                        <script src="js/lightbox.js" type="text/javascript"></script>
                        </head>
                        <body>
                        <a href="images/megan1_400_320.jpg" rel="lightbox">
                        <img src="images/megan1_400_320.jpg" width="100" height="80"
                        alt="Megan" border="0" /></a>
                        </body>
                        </html>

在浏览器中打开该页面时，只能看到缩略图，如图 3 所示。

图 3. 单击缩略图之前的显示效果

当我单击该缩略图时，实际大小的图像将优雅地显示在窗口中央，如图 4 所示。

图 4. 显示实际大小图像的 lightbox

此外，背景中的所有其他内容将变成灰色，这样用户将更容易注意到页面中间显示的内容。

lightbox 的动态演示

查看 lightbox 的在线动态演示。

如果您对 lightbox 这个术语还不太熟悉也没有关系：因为它是摄影行业中的一个相当深奥的词汇。在过去胶片摄影的时代，lightbox 是一个 6 英寸高，长宽皆为几英尺的盒子形状的设备，顶部涂有塑性白漆，盒子中间的小灯可以为整个表面提供照明。因此，我们可以将幻灯片和底片放在 lightbox 上，然后使用一种小型放大镜来检查图像。您可以认为图 4 中的效果就是在通过 lightbox 上的放大镜查看照片。因此，lightbox 的术语便从此而来。

但是，是否可以将图像换成文本，并实现同样的效果呢？

文本 lightbox

Particle Tree 这个站点就使用这种与众不同的方法实现了 lightbox。此方法的优点便是可以显示使用 Ajax 从服务器获取的任意 HTML 代码。我将使用这种方法将额外的文本显示给用户。

清单 4 显示了主页代码。

清单 4. index.html

                        <html>
                        <head>
                        <title>
                        Lightbox Text Test
                        </title>
                        <link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
                        <link rel="stylesheet" href="css/lightbox.css" media="screen,projection"
                        type="text/css" />
                        <script type="text/javascript" src="scripts/prototype.js"></script>
                        <script type="text/javascript" src="scripts/lightbox.js"></script>
                        </head>
                        <body>
                        <a href="text.php" class="lbOn">More About This Article</a>
                        </body>
                        </html>

清单 5 中的 HTML 代码将通过 Ajax 获取并随后显示给用户。

清单 5. text.php

                        <p>This article covers the basics of AJAX Lightbox that
                        shows text blocks instead of images</p>
                        <p><a href="#" class="lbAction" rel="deactivate">
                        Return to article list</a></p>

以上代码在浏览器中的显示效果如图 5 所示。

图 5. 单击文本便可获得更多信息

当我单击文本时，可以看到页面内容将突出显示出来。请参见图 6。

图 6. 运行中的文本 lightbox

文本 lightbox 的动态演示

查看文本 lightbox 的在线动态演示。

这种方法可以为页面上列出的产品或文章显示额外信息，而不必使用户离开当前页面。相反，您将间接地将用户的注意力转移到这些内容上。与 HTML 代码一样，这些信息可以包括更多的文本内容、图像，或者甚至是表单（比如说注册、评论或登录表单）。

回页首

窗口

我在上一示例中提到过使用 lightbox 显示表单，但是这并不是用户在使用表单时真正需要的。他们真正需要的是窗口。所幸的是，Prototype 库提供了一个极好的窗口实现，该窗口实现具有各种不同的皮肤可满足您的需要。

窗口代码还将使用 Ajax 通过 Prototype 获取将在窗口框架中显示的内容。首先，开发托管窗口的基本页面，如清单 6 所示。

清单 6. index.html

                        <html>
                        <head>
                        <script type="text/javascript" src="javascripts/prototype.js"></script>
                        <script type="text/javascript" src="javascripts/effects.js"></script>
                        <script type="text/javascript" src="javascripts/window.js"></script>
                        <script type="text/javascript" src="javascripts/window_effects.js"></script>
                        <link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
                        <link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
                        </head>
                        <body>
                        <a href="javascript:void showWindow();">Show Window</a>
                        <script>
                        function showWindow()
                        {
                        win = new Window( { className: 'spread', url: 'test.html',
                        title: 'Simple Window', width:400,
                        height:300, destroyOnClose: true, recenterAuto:false } );
                        win.showCenter();
                        }
                        </script>
                        </body>
                        </html>

此处的 JavaScript 代码将响应单击 Show window 按钮的操作，结果是创建一个具有指定宽度、高度、标题和内容（内容由特定的 URL 指定）的窗口。然后使用 showCenter() 方法显示窗口，窗口将显示在在浏览器窗口的中部。

清单 7 显示了窗口的内容。

清单 7. test.html

                        <h1>Registration</h1>
                        <p>You need to first register the product before...</p>

该页面在浏览器的显示效果如图 7 所示。

图 7. 窗口链接

页面中并没有什么内容，但是单击窗口链接之后却是另一番景色。如图 8 所示。

图 8. 弹出窗口

有点华而不实的感觉，但是它确实可以吸引用户的注意力。除了石灰绿之外，您还可以选择一些不同的皮肤。

但是我真正想要的是弹出表单，不是吗？我特别想在主页上实现一个登录表单，当我单击 Login 按钮时便会弹出一个登录表单。清单 8 显示了主页的代码。

清单 8. form.php

                        <html>
                        <head>
                        <script type="text/javascript" src="javascripts/prototype.js"></script>
                        <script type="text/javascript" src="javascripts/effects.js"></script>
                        <script type="text/javascript" src="javascripts/window.js"></script>
                        <script type="text/javascript" src="javascripts/window_effects.js"></script>
                        <link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
                        <link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
                        </head>
                        <body>
                        <div id="myloginform" style="display:none;overflow:clip;padding:10px;">
                        <form id="loginfrm">
                        <table>
                        <tr><td>Login</td><td><input type="text" name="name" /></td></tr>
                        <tr><td>Password</td><td><input type="password" name="password" /></td></tr>
                        </table>
                        </form>
                        <button onclick="login()">Login</button>
                        </div>
                        <a href="javascript:void showWindow();">Login</a>
                        <script>
                        var g_loginWindow = null;
                        function login()
                        {
                        new Ajax.Request( 'login.php', {
                        parameters: $('loginfrm').serialize(),
                        method: 'post',
                        onSuccess: function( transport ) {
                        g_loginWindow.close();
                        }
                        } );
                        }
                        function showWindow()
                        {
                        g_loginWindow = new Window( { className: 'spread', title: "Login",
                        destroyOnClose: true,
                        onClose:function() { $('myloginform').style.display = 'none'; } } );
                        g_loginWindow.setContent( 'myloginform', true, true );
                        g_loginWindow.showCenter();
                        }
                        </script>
                        </body>
                        </html>

这次，窗口的内容将直接存放在页面中。但是，当用户单击表单上的 Login 按钮时，页面将使用 Ajax.Request 对象向服务器请求登录表单。清单 9 显示了这个简单的登录脚本，实际中的实现将远没有这么简单。

清单 9. login.php

                        <true />

这时，当我在浏览器中打开该页面时将看到一个登录链接，如图 9 所示。

图 9. login 链接

当我单击该链接时，将看到一个非常酷的 Web 2.0 样式的登录窗口，如图 10 所示。

图 10. login 窗口

窗口的动态演示

查看窗口的在线动态演示。

当用户单击 Login 按钮时，页面将把用户名和密码发送给服务器。然后，服务器将验证凭证并建立一个会话 cookie，并回复响应，指示页面返回主页。

实际上，此类功能可以在应用程序中实现弹出窗口，并让用户感觉自己仿佛更像是在使用桌面应用程序，而不是在访问 Web 页面。

回页首

渐变消息

与用户通信的另一种新方法是渐变消息 — 也就是，这种消息将在屏幕的一个重要位置弹出，告诉用户某些重要的事情。在本例中，我将使用 Scriptaculous 效果库（它也构建于 Prototype.js 之上）实现渐变消息。。

首先，我们从清单 10 开始。

清单 10. index.html

                        <html><head>
                        <style>
                        .alert {
                        opacity: 0.0;
                        border:2px dashed black;
                        padding:5px;
                        background:#eee;
                        font-family: arial, verdana;
                        font-weight: bold; }
                        </style>
                        <script src="lib/prototype.js"></script>
                        <script src="src/effects.js"></script>
                        <script>
                        function submit()
                        {
                        new Ajax.Updater( 'result', 'alert.html', {
                        method: 'get',
                        onSuccess: function() {
                        new Effect.Opacity('result',
                        { duration: 2.0, from: 0.0, to: 1.0 } );
                        new Effect.Opacity('result',
                        { delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
                        } }
                        );
                        }
                        </script>
                        </head><body>
                        <div id="result" class="alert"></div><br/><br/>
                        <button onclick="submit()">Submit</button>
                        </body></html>

在理想情况下，该页面有点类似含有 Submit 按钮的表单。然后，当用户单击 Submit 按钮时，服务器接收到提交的表单数据后将返回一个消息。这个消息将突出显示在某个位置，然后效果将渐渐减弱。在本例中，我省去了表单元素，因此页面中只有一个 Submit 按钮。

Submit 按钮将 Ajax 请求发送给 alert.html 页面。然后，将该页面的结果存放在 result <div> 标记中，Scriptaculous 效果类可以使该标记显示为渐变效果。

清单 11 显示了 alert 页面的代码。

清单 11. alert.html

                        A new record has been added.

该页面中浏览器中的显示效果如图 11 所示。

图 11. 表单的 Submit 按钮

还是一样，页面中并没有什么内容。可以考虑在 Submit 按钮上面加入一些含有数据的表单字段。

当我单击 Submit 按钮时，页面将突出显示警告提示，如图 12 所示。

图 12. 渐变效果的消息

渐变效果的动态演示

查看渐变的在线动态演示。

几秒钟之后，消息将逐渐消失。

这种与用户交互的方式虽然简单，但是十分有效。只要别过度使用，它可以直接让用户感受到对象的出现和消失。这是人类与生俱来的本能。因此，您会自然地注意到。只要能够合理地使用这些技巧，吸引用户的注意力将不再困难。

分享这篇文章……


	将本文提交到 Digg

	发布到 del.icio.us

	提交到 Slashdot！

结束语

希望本文中的工具可以让您通过创新的方式实现交互和提示。随着时间的推移，我确信这些技巧将过度使用，并最终落得与状态栏一样的下场。但是在开始阶段，这些工具将提供一种有趣、有效且符合 Web 2.0 的吸引用户注意的方式。

回页首

下载

描述	名字	大小	下载方法
示例代码	x-ajaxxml6-lightbox.zip	1573KB	HTTP


	关于下载方法的信息

参考资料

学习

您可以参阅本文在 developerWorks 全球网站上的英文原文。
Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
订阅 Ajax 相关文章和教程的 RSS 提要：获得即将发表的 Ajax 相关文章和教程的通知（查看 developerWorks 内容 RSS 提要了解更多的信息）。
PHP 主页：PHP 程序人员的宝库，其中含有这个广泛使用的脚本语言的各方面信息。
Prototype 库：这个 JavaScript 框架可以简化动态 Web 应用程序的开发过程。
Scriptaculous JavaScript 库：获取有用的显示助手程序和显示效果，使用这个基于 Prototype 的框架开发动态的 Web 站点。
Lightbox JS 2.0 库：探索这个创建图像 lightbox 的出色方法。
Lightbox Gone Wild!：Particle Tree 中的这段代码使用一种更加灵活的方法实现了 lightbox。
Xilinus.com：Xilinus 上含有 Window 库。
Prototype.js 文档页面：获取有关 Prototype JavaScript 库的更多信息，该页面含有到官方 Prototype 博客和其他资源的链接。
jQuery：这个 JavaScript 库提供了与 Prototype.js 类似的功能。
Yahoo UI 库：查阅 Yahoo! 的 Ajax 工具包。
developerWorks 中国网站 XML 专区：在 developerWorks XML 专区中学习有关 XML 的方方面面。
IBM XML 认证：了解如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。
XML 技术文档库：developerWorks XML 专区提供了大量技术文章、提示、教程、标准以及 IBM 红皮书。
developerWorks 技术事件和网络广播：随时关注技术的最新进展。
Ajaxian：研读有关 Ajax 开发的文章，了解最新的动向和使用 Ajax 的前端小部件。

posted @ 2008-01-25 16:53 曹振华阅读(431) 评论(0) 编辑收藏举报

刷新页面返回顶部

曹振华

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

公告