關(guān)于 LIGHTBOX

在網(wǎng)站上用于顯示大圖或者播放視頻的常用控件就是 Lightbox 了。一般地，lightbox 背景周圍一般會(huì)變成灰色，有助于讓人們的注意力集中在 lightbox 所顯示的內(nèi)容上。點(diǎn)擊 lightbox 周邊區(qū)域或者 close 按鈕可以關(guān)閉 lightbox。

在 Axure RP 中，你能通過 treat as lightbox 設(shè)置背景變暗，再將其添加到 Show/Hide 動(dòng)作上去。一個(gè)通過上訴方法實(shí)現(xiàn)的簡單的圖片視頻 lightbox 示例可以下載 AxureWebsite.zip。

lightbox 示例

圖片 Lightbox

http://wiki.jikexueyuan.com/project/axure/images/lightbox1.png" alt="image" />

Lightboxes 經(jīng)常被用于展示大圖，為了構(gòu)建此類的 lightbox，你可以通過一個(gè)圖片創(chuàng)建一個(gè)動(dòng)態(tài)面板，當(dāng)圖片的縮略圖被點(diǎn)擊時(shí)，lightbox 面板就會(huì)暗化背景，顯示大圖。使用動(dòng)態(tài)面板顯示一張圖片也可以設(shè)置相似的狀態(tài)達(dá)到同樣新的效果。

查看例子

視頻 Lightbox

http://wiki.jikexueyuan.com/project/axure/images/lightbox2.png" alt="image" />

使用內(nèi)嵌的窗口，視頻能夠通過 lightbox 進(jìn)行播放。

當(dāng)你想隱藏 lightbox 時(shí)，你應(yīng)該添加一個(gè)動(dòng)作，讓其在所有瀏覽器中適當(dāng)?shù)乇浑[藏。

查看例子

創(chuàng)建一個(gè)居中的，背景暗化的 Lightbox

將圖片和畫面裝換成動(dòng)態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/lightbox3.png" alt="image" />

首先打開AxureLightboxTutorial.rp ,然后打開 Lightbox Tutorial 頁面。

我們先選擇圖片和矩形，同過右鍵單擊選中 Convert to Dynamic Panel選項(xiàng)，將他們轉(zhuǎn)換成動(dòng)態(tài)面板。將其標(biāo)記為 lightbox。

在一個(gè)交互動(dòng)作中，我們能夠隱藏和顯示多個(gè)小部件。

隱藏它

http://wiki.jikexueyuan.com/project/axure/images/lightbox4.png" alt="image" />

在顯示 lightbox 之前，我們想讓它處于隱藏狀態(tài)，所以右鍵單擊它，點(diǎn)擊 Set Hidden 選項(xiàng)。

捎到瀏覽器去

http://wiki.jikexueyuan.com/project/axure/images/lightbox5.png" alt="image" />

選中 lightbox，在 Properties 選項(xiàng)板中單擊 Pin to Browser 選項(xiàng)。

在彈窗中，選上 pin to browser window，然后選上 Center 和 Middle。點(diǎn)擊 OK。

然后當(dāng) lightbox 顯示時(shí)就會(huì)出現(xiàn)在屏幕中間了。

添加 OnClick 事件到按鈕

http://wiki.jikexueyuan.com/project/axure/images/lightbox6.png" alt="image" />

選中名為 Show Lightbox 的按鈕，在 Interactions 選項(xiàng)板中雙擊 OnClick 事件。

在更多選項(xiàng)中選中 treat as lightbox

http://wiki.jikexueyuan.com/project/axure/images/lightbox7.png" alt="image" />

在事例編輯器中，從 More Options 下拉列表選中 treat as lightbox。

這個(gè)設(shè)置將在顏色選擇器中指定顯示小部件與彩色背景。