使用 Ajax 实现 lightbox

======================================================
注：本文源代码点此下载
======================================================

文档选项

打印本页

将此页作为电子邮件发送

讨论

样例代码

级别: 初级

jack d herrington ([e-mail]), 高级软件工程师, 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

submit

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

submit 按钮将 ajax 请求发送给 alert.html 页面。然后,将该页面的结果存放在 result

标记中,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 的前端小部件。

网站计数器

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/