1. 编程号首页

使用 Ajax 实现 lightbox

编程小号 • • 未分类

使用 Ajax 实现 lightbox======================================================注：本文源代码点此下载======================================================文档选项打印本页将此页作为电子邮件发送讨论样例代码级别:初级jackdher

======================================================


注：本文源代码点此下载

======================================================

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

文档选项

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

打印本页

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

将此页作为电子邮件发送

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

讨论

使用 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 实现 lightbox

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

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

订阅 ajax 相关文章和教程的 rss 提要

使用 Ajax 实现 lightbox

工具提示

在浏览器中设置状态栏相当简单,但是要实现一些有用的功能(比如说弹出一个工具提示)则不是那么容易。考虑到简单性,我选择使用了一个可从网络上免费获得的工具提示库,它构建于出色的 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 按钮

使用 Ajax 实现 lightbox

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

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

图 12. 渐变效果的消息

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

渐变效果的动态演示

查看 渐变使用 Ajax 实现 lightbox 的在线动态演示。

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

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

使用 Ajax 实现 lightbox

分享这篇文章……

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

将本文提交到 digg

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

发布到 del.icio.us

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

提交到 slashdot！

使用 Ajax 实现 lightbox

结束语

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

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

回页首

下载

描述

名字

大小

下载方法

示例代码

x-ajaxxml6-lightbox.zip

1573kb

http

使用 Ajax 实现 lightbox

使用 Ajax 实现 lightbox

关于下载方法的信息

使用 Ajax 实现 lightbox

参考资料

学习

您可以参阅本文在 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^)/

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/35964.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注