AJAX設計模式之Lightbox

2021-08-29 06:05:30 字數 1047 閱讀 2219

什麼是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的重要設計模式之一。

lightbox 效果收集如下:

lightbox js

典型也是最常見的乙個,目前2.0 版,不過似乎只能顯示而已。

thickbox

greased lightbox

提供裝在瀏覽器的擴充套件,平常看時就會有 lightbox 效果。

greybox

這個就厲害了,除了可以用於和網頁外、連 flash、影片都可以顯示在 lightbox 彈出的方框裡面。

lightbox gone wild!

也是可以顯示網頁、,效果還不錯。

設計模式之禪之設計模式 門面模式

1 package com.yeepay.sxf.template18 2 3 寫信的業務類 4 隱藏在門面角色裡邊,不需要暴露太多5 author sxf6 7 8public inte ce iletterprocess view code 寫信的業務類的實現 1 package com.yee...

設計模式之禪之設計模式 橋梁模式

1 package com.yeepay.sxf.template24 2 3 實現化角色 4 相當於不同的業務邏輯,抽象出共有行為5 6 產品類7 author sxf8 9 10 public abstract class product view code 房子產品實現 1 package c...

設計模式 設計模式之工廠模式

工廠方法模式 建立模式 使用場景?作用?形態?場景 大量類似的實體類 要建立的實體類都是同一本質的東西 披薩 有部分類似功能 準備 烘烤 切法 實現方式不一樣 準備的材料不同 烘烤時間不同 切法不同 將繁瑣複雜的建立類的過程聚集在一起,有序清晰 把具體例項化的過程從客戶 中抽離 作用 1 將建立物件...