<%@ page contentType="text/html; charset=gb2312"%> WEB2.0开发之Ajax设计模式之Lightbox
网站公告:   ◆北天JAVA技术网热情为java爱好者服务,本网内容包括JAVA(JSP、servlet、EJB、webservice、j2ee、javabean、应用服务器、JavaScript),数据库(MYSQL、SQL Server、Sybase、Oracle、DB2、数据库综合知识),设计研究(设计模式、Struts、Spring、Hibernate、设计框架、设计综合知识),WEB2.0新技术(主要介绍AJAX),以及各种技术的入门、实例、例子等等,欢迎各位多来坐坐!◆  诚邀各位JAVA爱好者加盟!◆  本网站内容丰富,更新快,保证每周20篇以上!  
加入收藏
设为首页
联系站长
承接项目
  相关资源:网站首页 | 免费培训学院 | 技术论坛 | JAVA聊天室 | 作家专栏 | 开发工具 | 认证考试 | 会员俱乐部
  JAVA技术初学者园地 | jsp与servlet | javascript | Java源代码 | EJB | web service | 应用服务器 | JAVA综合知识
  设计研究设计模式 | 设计框架 | Struts | Spring | Hibernate | 开源项目 | 面向对象设计 | 设计综合知识
  数 据 库MYSQL | SQL Server | Sybase | Oracle | DB2 | Informix | Access | 数据库综合知识
  其他资源:AJAX新技术 | 网站开发 | ERP软件 | OA办公软件 | 商业智能BI | 开发综合知识 | 承接项目 | 项目试用

 
 
WEB2.0开发之Ajax设计模式之Lightbox
     发布者: 发布时间:2007-01-19

Lightbox 这个词还真不好翻译,勉强硬解为"灯笼"。

Lightbox的效果类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。

Lightbox的作用则相当于从前只在IE中被支持的"Modal Dialog";现在在FireFox也可用window.open(url, name, " modal=yes ");

来实现同样的效果。使用"Modal Dialog"将限制用户的操作于弹出的对话框中,只有完成设定好的操作后方才关闭。在一些逻辑敏感的应用中强制吸引用户的注意力以防止用户的误操作导致程序逻辑淆乱。

其实 Lightbox 并不新鲜,在前年Ajax未诞生之前,它是以 "Inline Popup"的名号出现的。诞生的原因是因为屏蔽弹出窗口的技术纷纷被浏览器采用,而浏览器厂商间也没有一个统一的 Popup 解决方案。当时我记得还有一些说"Inline Popup"破解了弹出窗口屏蔽的报道。

"Inline Popup" 并不被很多人关注,不过我还是发现国内的163信箱去年改版推出的时候大量使用了此效果。Ajax 名正言顺之时,"Inline Popup"也重装再现了,并换了一个有美感的名字 "Lightbox"。

在今年,Lightbox JS最早被其作者Lokesh Dhakar用来放大显示图片覆盖于当前页面之上,其是用CSS来定义图片容器,用一幅半透明的png图片实现渐变阴暗的效果。使用相当简单:

1.加载lightbox.js

2. 给图片链接增加一个rel="lightbox"属性。如:

受 Lightbox 的启发,Chris Campbell 认为并决定让Lightbox Gone Wild!。他引入了Prototype1.4.0,配合CSS与HTML 标签的class属性重新实现Lightbox的效果,同时扩展LightBox原来的覆盖显示图片的单纯功能,使得可以通过流行的异步Updator技术动态加载表单。可以去体验一下他提供的 demo。不过似乎他的实现有一些bug,因为该demo在我的FireFox1.5和IE7beta2上都会导致CPU占用率100%。

alwaysBETA 很快也推出了自己的改进方案。他没有增加新的功能,但是通过引入微型效果类库Moo.FX让Lightbox更漂亮,更容易定制。

第一次使用WinXP的时候,关机时的阴暗渐变效果让我颇为惊艳。利用Lightbox引导用户的注意力完成预先设定的操作,良好的对比度效果营造温和的视觉氛围。相信在当前交互界面日益接近桌面的Web应用中,Lightbox 也将会成为Ajax的设计模式之一。

此时我发现就其功能和效果而言,"Lightbox"翻译成"灯笼"似乎也没那么牵强附会了。

(转载文章请保留出处:北天JAVA技术网(www.java114.com))
 
更多精彩文章:
使用Buffalo集成Spring写的一个登录实例
WEB2.0 中 AJAX 技术应用的详细探讨
AJAX技术之如何处理书签和翻页按扭
Ajax令网络更顺滑 微软出招何时
用AJAX+J2EE实现一个网上会议室系统
AJAX技巧:如何处理书签和后退按钮
 
        
标 题:   
内 容:   
 
                                  
 
免责声明:该文章由网友发表,如果对您造成侵权,请联系站长

首页 - 承接项目 - 网站地图 - 联系我们 -
版权所有北天JAVA技术工作室 ICP证号:粤ICP备06079815号