AJAX設計模式之Lightbox

其實知道有這麼個東西有一段時間了, 第一次接觸是<<程序員>>2007第一期,上面講了許多有關ajax的東西,其中一個就是Lightbox,而真正想學習Lightbox是在學習Springside的時候,它的bookstore的例子中的登陸界面就用了lightbox的效果,讓我發現這個東西真好,恩,Lightbox是個好東西.

推薦大家使用GreyBox, 太好了!

鏈接如下:http://orangoo.com/labs/GreyBox/

下面的文字轉自:<o:p></o:p>

http://www.cnbruce.com/blog/showlog.asp?log_id=1005&cat_id=34<o:p></o:p>

<o:p> </o:p>

什麼是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!
也是可以顯示網頁、圖片,效果還不錯。


<o:p></o:p>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章