使用 Ajax 实现 Lightbox
本文发布于 16 年前，部分内容可能已经失去参考价值。
2007 年 10 月 29 日
在这个一切都要求新奇的世界中，要吸引用户的注意实属不易。了解如何在 Ajax 工具中使用 lightbox、弹出、窗口和渐变消息之类的新技术吸引用户的目光。
这可能是流传在都市中的一个传奇故事。很多年之前就有人和我说过这样一个用户交互体验。测试者的座位下面塞了 100 美金，而他正在使用计算机中的桌面应用程序。这个应用程序的状态栏中显示了这样一条信息：“在您的座位下面有 100 美金。”可悲的是，没有一个参与者能够发现他座位下面的钱。这个故事告诉我们状态栏传递信息的效率有多低，而且要吸引用户的注意绝非易事。
本文将介绍如何结合 PHP、动态 HTML（DHTML）和异步的 JavaScript + XML（Ajax）为内容增色，从而真正吸引用户的眼球。
 |
在浏览器中设置状态栏相当简单，但是要实现一些有用的功能（比如说弹出一个工具提示）则不是那么容易。考虑到简单性，我选择使用了一个可从网络上免费获得的工具提示库，它构建于出色的 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 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 是一个 6 英寸高，长宽皆为几英尺的盒子形状的设备，顶部涂有塑性白漆，盒子中间的小灯可以为整个表面提供照明。因此， 我们可以将幻灯片和底片放在 lightbox 上，然后使用一种小型放大镜来检查图像。您可以认为图 4 中的效果就是在通过 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
|
|
这种方法可以为页面上列出的产品或文章显示额外信息，而不必使用户离开当前页面。相反，您将间接地将用户的注意力转移到这些内容上。与 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. 渐变效果的消息
|
|
几秒钟之后，消息将逐渐消失。
这种与用户交互的方式虽然简单，但是十分有效。只要别过度使用，它可以直接让用户感受到对象的出现和消失。这是人类与生俱来的本能。因此，您会自然地注意到。只要能够合理地使用这些技巧，吸引用户的注意力将不再困难。
|
希望本文中的工具可以让您通过创新的方式实现交互和提示。随着时间的推移，我确信这些技巧将过度使用，并最终落得与状态栏一样的下场。但是在开始阶段，这些工具将提供一种有趣、有效且符合 Web 2.0 的吸引用户注意的方式。
|
|
| 描述 | 名字 | 大小 | 下载方法 |
|---|---|---|---|
| 示例代码 | x-ajaxxml6-lightbox.zip | 1573KB | HTTP |
| ||||
 |
关于下载方法的信息 | |||
