程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> WEB2.0開發之Ajax設計模式之Lightbox

WEB2.0開發之Ajax設計模式之Lightbox

編輯:關於JAVA

Lightbox 這個詞還真不好翻譯,勉強硬解為"燈籠"。 軟件開發網

Lightbox的效果類似於WinXP操作系統的注銷/關機對話框,除去屏幕中心位置的對話框,其他的區域都以淡出的效果逐漸變為銀灰色以增加對比度,此時除了對話框內的表單控件,沒有其他區域可以獲取焦點。

Lightbox的作用則相當於從前只在IE中被支持的"Modal Dialog";現在在Firefox也可用window.open(url, name, " modal=yes "); 軟件開發網

來實現同樣的效果。使用"Modal Dialog"將限制用戶的操作於彈出的對話框中,只有完成設定好的操作後方才關閉。在一些邏輯敏感的應用中強制吸引用戶的注意力以防止用戶的誤操作導致程序邏輯淆亂。

其實 Lightbox 並不新鮮,在前年AJax未誕生之前,它是以 "Inline Popup"的名號出現的。誕生的原因是因為屏蔽彈出窗口的技術紛紛被浏覽器采用,而浏覽器廠商間也沒有一個統一的 Popup 解決方案。當時我記得還有一些說"Inline Popup"破解了彈出窗口屏蔽的報道。 http://www.mscto.com

"Inline Popup" 並不被很多人關注,不過我還是發現國內的163信箱去年改版推出的時候大量使用了此效果。AJax 名正言順之時,"Inline Popup"也重裝再現了,並換了一個有美感的名字 "Lightbox"。

在今年,Lightbox JS最早被其作者Lokesh Dhakar用來放大顯示圖片覆蓋於當前頁面之上,其是用CSS來定義圖片容器,用一幅半透明的png圖片實現漸變陰暗的效果。使用相當簡單:

1.加載lightbox.JS

2. 給圖片鏈接增加一個rel="lightbox"屬性。如:

image #1  

受 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"翻譯成"燈籠"似乎也沒那麼牽強附會了。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved