本日志标题:[转]AJAX设计模式之Lightbox        [2006-8-4] Bookmark and Share

什么是Lightbox?看了下面的例子你就会明白:

http://www.cnbruce.com/test/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"。

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

使用方法:
http://www.huddletogether.com/projects/lightbox2/

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

下文引自:http://www.joy100.com/article.asp?id=120

Lightbox JS
典型也是最常见的一个,目前2.0 版,不过似乎只能显示图片而已。

ThickBox
这个也是很常见,可以显示图片、网页,并且可指定方框的大小,推荐。

Greased Lightbox
提供装在浏览器的扩充套件,平常看图片时就会有 Lightbox 效果。

GreyBox
这个就厉害了,除了可以用于图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面。

Lightbox Gone Wild!
也是可以显示网页、图片,效果还不错。

fancybox
基于Jquery的关闭按钮为右上角突出的圆状按钮




在百度搜索完整的[转]AJAX设计模式之Lightbox内容,或者用Google搜索相关的更多内容

By [cnbruce] at 10:49:31 | 评论 [11] | 浏览 [42513] | TrackBack| 返回顶部

About Comments
不要什么东西都扣个Ajax帽子。
By [Guest] at 2006-8-4 11:21:45
我早已在自己的wordpress中使用lightbox了
By [kevinchan] at 2006-8-4 13:06:10
原来这也叫设计模式
By [_Dah] at 2006-8-4 21:32:58
吐啊吐啊就习惯了
By [cc111] at 2006-8-5 17:48:06
不要什么东西都扣个Ajax帽子。
By [小智] at 2006-8-9 15:04:12
ding
By [boscohxy] at 2006-8-24 10:11:21
你说的这个有用吗?不懂
http://paper.wucaige.cn
By [五彩美腿] at 2007-8-4 3:06:47
东西还不错,名字起得不太合适。。
By [xhq] at 2008-6-6 12:09:11
http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html
这个也做的不错
By [gdf] at 2008-10-30 23:01:47
好像有点看不懂,看来要好生补补了www.you16.cn
By [速度] at 2010-5-20 18:08:40


Post a Comment
呢称: 验证码: 
禁止笑脸转换 禁止UBB | 缩放输入框:6 5 | [Ctrl+Enter提交](1000个字符限制)