jquery 彈出層插件 ThickBox 多功能彈出層插件支持圖片、ajax、內嵌內容彈等

1、一張圖片演示

描述:

這是ThickBox的一個簡單實例，這個例子展現了在中放置一張圖片（請看演示）。

說明:

• 建立一個link元素 (<a href>)
• 給建立的這個link元素一個class屬性，其值是：thickbox (class="thickbox")
• 在href屬性中指定一個張圖片地址(.jpg .jpeg .png .gif .bmp)

點擊圖片查看效果:

2、多張圖片演示

描述:

這個例子和單張圖片差很少，但他容許使用rel屬性使多張圖片成爲一組，在ThickBox裏導航。這種完美的使用方法適用於圖片集。

使用說明:

• 建立一個link元素 (<a href>)
• 給建立的這個link元素一個class屬性，其值是：thickbox; (class="thickbox")
• 在href屬性中指定一個張圖片地址 (.jpg .jpeg .png .gif .bmp)
• 給每個link元素一個相同的rel值。（好比：rel="gallery-plants"）

重點提醒:

當你打開一個ThickBox圖片集的時候, 你能經過鍵盤的左右箭頭鍵向前和向前和向後導航（在 ThickBox 裏也提供了Next和Previous的連接）。 圖片將會在圖片集中按HTML文檔流程從第一張顯示到最後一張。

點擊一張圖片:

3、內嵌內容演示

描述:

頁面中的內嵌內容，隱藏的或是顯示的都可以放置在ThickBox中。

使用說明:

• 建立一個link元素(<a href>)
• 給建立的這個link元素一個class屬性，其值是：thickbox (class="thickbox")
• 給link元素的href屬性設置爲: #TB_inline
• 在href屬性的值#TB_inlineIn後面追加一下字符:

  ?height=300&width=300&inlineId=myOnPageContent

• 根據你的實際須要更改height, width, 和 inlineId的值（這裏的inlineID就是包含你想顯示在ThickBox上的內容的容器的id）。
• 固然你也能夠在參數字符串中加 modal=true(好比. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) 這樣當關閉ThickBox時會調用ThickBox內部的一個tb_remove()函數。在演示中查看「顯示隱藏模式的內容」則要求點擊yes 或 no才能關閉ThickBox。

重點提醒:

若是內嵌在ThickBox的內容多於ThickBox顯示的尺寸，一個滾動條會出現。請確認ThickBox的尺寸和內容的匹配避免出現滾 動條而顯示所有內嵌內容。也就是說，若是不想要滾動條，你能夠增長ThickBox的寬和高直到內嵌的內容不須要滾動條就能所有顯示。

點擊「顯示」按鈕後，將在中看到下面的一段文字以及那個寫了」測試「的input，或是點擊 顯示隱藏模式的內容  則顯示在本文檔中隱藏起來id爲「hiddenModalContent」的div內的內容

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

4、iFramed 內容

描述:

在ThickBox中打開被 iFramed URL.哈, 這正 Greybox的功能.在打開URL的ThickBox iframe的內部. 是的,這是Greybox 功能.

使用說明:

• 建立一個link元素 (<a href>)
• 給建立的這個link元素一個class屬性，其值是：thickbox (class="thickbox")
• 給link元素的href屬性指向一個你但願在ThickBox顯示的URL。
• href屬性的URL後面追加上如下字符參數：

  ?KeepThis=true&TB_iframe=true&height=400&width=600

• 根據你的實際須要改變上面的參數字符。
• 固然你也能夠在參數字符串中加 modal=true
  (好比：?KeepThis=true& TB_iframe=true&height=400&width=600&modal=true) 這樣當關閉ThickBox時會調用ThickBox iframe (self.parent.tb_remove())內部的一個tb_remove()函數。在演示中查看「打開iFrame Modal的演示」則要求點擊ok才能關閉ThickBox。

重點提醒:

全部其餘參數字符都必須在TB_iframe 參數以前。URL中全部"TB" 以後的將被移除。

例子1 例子2 iFrame Modal被打開的演示

5、ajax 內容演示

描述:

採用一個隱藏的HTTP request (AJAX) 從同一個服務器上獲取文件，並使用顯示其內容。

使用說明:

• 建立一個link元素 (<a href>)
• 給建立的這個link元素一個class屬性，其值是：thickbox (class="thickbox")
• 給link元素的href屬性指向一個連接文件或是服務器目錄。(href="ajaxLogin.htm")
• 在href屬性的URL後面追加如下字符來結束URL:

  ?height=300&width=300

• 根據須要更改寬和高的值。
• 固然，你也能夠在上面的參數字符串再加上modal=true(好比. ?height=300&width=300&modal=true) 這樣當關閉ThickBox時會調用ThickBox內部的一個tb_remove()函數。在演示中查看「login」這個例子則要求點擊yes 或 no才能關閉ThickBox。

重點提醒:

爲了在新打開的Ajax ThickBox中打開新的Ajax內容，他的代碼必須包含適當的 HTML (class=""thickbox) 來加載一個Ajax ThickBox (請留意演示例子)。其餘惟一須要注意的一個地方就是調用的ThickBox必須包含寬和高，若是你給這兩項留空，則窗口會自適應到默認大小 （630*440）.