JQUERY THICKBOX彈出層插件
更新時間：2008年08月30日 19:29:22 作者：
JQUERY插件THICKBOX的功能很強(qiáng)大,但是它的基本使用卻很簡單容易.但是要研究的更深,運(yùn)用得更加靈活的話,還是有點(diǎn)難度，根據(jù)其官方站點(diǎn)介紹
.THICKBOX支持一下瀏覽器:
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……但是據(jù)我的使用,IE6還是有點(diǎn)問題的!下面我們首先來看它的調(diào)用:
1.肯定你先要下載jquery.js和thickbox.js了.還有thickbox.css也不能少!
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
//path-to-file 就是你放這三個文件的路徑
2.彈出單張圖片的方法:
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
3.多張圖片實(shí)現(xiàn)分頁也很簡單:
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>
4.彈出網(wǎng)頁inLINECONTENT
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
//重要的是 #TB_inline?
5.iFRAME形式的
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example</a>
所有調(diào)用的樣式都得加上class=”thickbox”.這是控制彈出的效果,具體可以參照J(rèn)QUERY的官方站點(diǎn)對THICKBOX的介紹,里面有具體效果:http://jquery.com/demo/thickbox/
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……但是據(jù)我的使用,IE6還是有點(diǎn)問題的!下面我們首先來看它的調(diào)用:
1.肯定你先要下載jquery.js和thickbox.js了.還有thickbox.css也不能少!
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
//path-to-file 就是你放這三個文件的路徑
2.彈出單張圖片的方法:
復(fù)制代碼 代碼如下:
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
3.多張圖片實(shí)現(xiàn)分頁也很簡單:
復(fù)制代碼 代碼如下:
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>
4.彈出網(wǎng)頁inLINECONTENT
復(fù)制代碼 代碼如下:
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
//重要的是 #TB_inline?
5.iFRAME形式的
復(fù)制代碼 代碼如下:
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example</a>
所有調(diào)用的樣式都得加上class=”thickbox”.這是控制彈出的效果,具體可以參照J(rèn)QUERY的官方站點(diǎn)對THICKBOX的介紹,里面有具體效果:http://jquery.com/demo/thickbox/
您可能感興趣的文章:
- jQuery+CSS3+Html5實(shí)現(xiàn)彈出層效果實(shí)例代碼(附源碼下載)
- Jquery+CSS3實(shí)現(xiàn)一款簡潔大氣帶滑動效果的彈出層
- jQuery Dialog 彈出層對話框插件
- jQuery彈出層始終垂直居中相對于屏幕或當(dāng)前窗口
- jquery實(shí)現(xiàn)居中彈出層代碼
- JQuery彈出層示例可自定義
- jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- jQuery Mobile彈出窗、彈出層知識匯總
- jQuery點(diǎn)縮略圖彈出層顯示大圖片
- jQuery Layer彈出層傳值到父頁面的實(shí)現(xiàn)代碼
- jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果示例
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過提示信息的地圖熱點(diǎn)效果
這是一個升級版本，更新了一個在IE8里的小問題，加入了提示框的內(nèi)容自動換行處理(北京點(diǎn)上有演示)！估計差不多該是最后樣式了。IE6、IE8、谷歌、火狐、測試正常。2015-04-04
jquery實(shí)現(xiàn)選中單選按鈕下拉伸縮效果
這篇文章主要介紹了jquery實(shí)現(xiàn)選中單選按鈕下拉伸縮效果的方法,涉及jquery鼠標(biāo)事件及頁面元素樣式的動態(tài)操作技巧,該功能可用于動態(tài)顯示特定內(nèi)容(如發(fā)票打印等),需要的朋友可以參考下2015-08-08
jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法
jQuery對表格的操作是老生常談的問題了,各種插件也到處都是,這里我們還是來從技術(shù)著手jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法:2016-05-05
ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)
這篇文章主要介紹了ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery表單設(shè)置值的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
easy-ajax是為了治理前端亂寫Ajax方法而生。接下來通過本文給大家介紹JQuery 封裝 Ajax 常用方法，需要的朋友參考下2017-05-05
Tooltip（提示框）是一種常見的效果，它通常用在需要進(jìn)一步解釋、說明或提示的某個詞上。這種小效果實(shí)現(xiàn)起來雖然不難，但如果你想不勞而獲，可以試試 Tips。2015-07-07
jQuery實(shí)現(xiàn)簡單漂亮的Nav導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單漂亮的Nav導(dǎo)航菜單效果,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)遍歷與操作頁面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
本文和其他的介紹JQuery的方法不同，本文側(cè)重點(diǎn)是介紹一些JQuery的使用原則，以便讓JQuery代碼更高效的執(zhí)行。2016-04-04
jQuery實(shí)現(xiàn)復(fù)制到粘貼板功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)復(fù)制到粘貼板功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02