The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

介紹幾套關於 Box Window 的 jQuery Plugins

我不知道怎麼描述今天的主題,總之就是讓頁面中央顯示一個 Window 視窗 ( 不是開新視窗 ),而是讓一個方塊(Box)顯示在頁面中央,並且讓方塊以外的區域都變的暗暗的,讓視覺焦點專注在那個方塊視窗中,如下圖例:

ThickBox Window

使用這樣的效果有許多好處,例如不用設計太多額外頁面,並且可透過 jQuery 動態載入內容,不但節省頻寬、增加使用性(Usability)、減少套版時間與複雜度、....等等。

在實務上,我曾經用過與我身邊的朋友曾經用過許多類似功能的 jQuery Plug-ins,今天我整理介紹 3 套較多人使用的 Box Window 套件,這幾套都是 jQuery-based 的外掛套件,都還蠻好用的。

ThickBox

  • 網址:http://jquery.com/demo/thickbox/
  • 特色:
    • 支援顯示的內容包括 images, iframed content, inline content, 與 AJAX content
    • 在 IE 6 下可自動隱藏 Form 元素 ( 你應該知道 <select> 元素會蓋住所有 layer 這件事 )
    • 視窗會永遠顯示在畫面正中央,包括你捲動視窗或調整視窗大小
    • 視窗可透過超連結表單元素(如: 按鈕)影像地圖(ImageMap) 啟動

FancyBox - fancy image zooming tool

  • 網址:http://fancy.klade.lv/
  • 特色:
    • 適用於瀏覽單張或多張圖片
    • 有比 ThickBox 漂亮的預設畫面與過場效果(transitions) => 他已經自稱 FancyBox 了 ^^
    • 可直接喚起 圖片 (images)、div ( inline content ) 或 url ( 透過 iframe 載入網頁 )

jQuery lightBox plugin