Jquery ThickBox插件使用心得(不建議使用)
更新時(shí)間:2010年09月08日 09:30:17 作者:
最近發(fā)現(xiàn)一個(gè)不錯(cuò)的基于jquery的插件thickBox ,感覺比facebox好用。但因?yàn)閖query官方不推薦使用。所以這個(gè)只是學(xué)習(xí)的朋友,不建議使用這個(gè)。
大家可以使用官方推薦的一下幾個(gè)插件
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
* colorbox
* jQueryUI Dialog
* fancybox
* DOM window
* shadowbox.js
做項(xiàng)目中發(fā)現(xiàn)facebox如果快速單擊兩下,容易出現(xiàn)黑屏。而且facebox的框架是用table寫的,可能因?yàn)閠able相對(duì)div在結(jié)構(gòu)方面更穩(wěn)定些。如果彈出層里是table布局的,樣式就會(huì)受到facebox的樣式影響,還要重新reset一下。
看了下官方的api,我研究了下,做了個(gè)整理。看下圖:

附件中index.html是主頁,其它頁面都是調(diào)用頁面。點(diǎn)擊index頁面,就能看到如圖的頁面。圖、按鈕、文字都是可以點(diǎn)的。需要點(diǎn)擊的標(biāo)簽都要加上class="thickbox"。當(dāng)頁面出現(xiàn)滾動(dòng)條時(shí),彈出層固定在窗口的正中間不會(huì)移動(dòng)。當(dāng)彈出層中只是圖片時(shí),圖片大小會(huì)根據(jù)當(dāng)前窗口的大小進(jìn)行壓縮。所有的彈出層都可以按"esc"退出,除了需要點(diǎn)確認(rèn)的彈出層外,點(diǎn)擊彈出層以外的地方都可以關(guān)閉彈出層。
1.展示圖片(單張):
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
<img src="images/single.jpg" alt="Plant" width="100" height="75" />
</a>
2.展示圖片(多張):
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/>
</a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/>
</a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/>
</a>
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant4.jpg" alt="Plant 4" width="100" height="75"/>
</a>
這里每個(gè)a都要加上rel屬性,而且屬性值要一樣。前后展示圖可以通過" > "和" < "來切換
3.彈出層內(nèi)容在當(dāng)前頁面中時(shí):
<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show" type="button">
the paragraph and input below in a ThickBox, or
<input alt="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show hidden modal content" type="button">
<div id="myOnPageContent" style="display:none;">
<p>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.</p>
<p><select name=""><option>test</option></select></p>
</div>
<div id="hiddenModalContent" style="display:none;">
<p>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.</p>
<p style="text-align: center;"><input type="submit" onclick="tb_remove()" value=" Ok " id="Login"/></p>
</div>
第一個(gè)input點(diǎn)開的彈出層有input框、title和操作按鈕以及文字。第二個(gè)input點(diǎn)開的彈出層只有文字。
彈出層的大小是根據(jù)input的alt屬性里的width和height值來定義的。下面講到的幾種情況也是這樣來定義彈出層大小的。
4.調(diào)用外部文件,彈出層是iframe
<a href="ajaxFrame.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>
<a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
如果彈出層是嵌套在iframe里需要添加“TB_iframe=true"。
第一個(gè)是調(diào)用ajaxFrame.PHP文件。
第二個(gè)是調(diào)用ajaxOverFlow2.html文件。
第三個(gè)是調(diào)用了iframeModal.html文件,隱藏了title和操作按鈕。
5.調(diào)用外部文件,彈出層不是iframe
<a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
第一個(gè)調(diào)用ajaxOverFlow.html文件。
第二個(gè)調(diào)用ajax.PHP文件。
第三個(gè)調(diào)用ajaxLogin.html文件,form表單。
第四個(gè)調(diào)用ajaxTBcontent.html文件,彈出層里再調(diào)用newTBcontent.html文件。
復(fù)制代碼 代碼如下:
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
* colorbox
* jQueryUI Dialog
* fancybox
* DOM window
* shadowbox.js
做項(xiàng)目中發(fā)現(xiàn)facebox如果快速單擊兩下,容易出現(xiàn)黑屏。而且facebox的框架是用table寫的,可能因?yàn)閠able相對(duì)div在結(jié)構(gòu)方面更穩(wěn)定些。如果彈出層里是table布局的,樣式就會(huì)受到facebox的樣式影響,還要重新reset一下。
看了下官方的api,我研究了下,做了個(gè)整理。看下圖:

附件中index.html是主頁,其它頁面都是調(diào)用頁面。點(diǎn)擊index頁面,就能看到如圖的頁面。圖、按鈕、文字都是可以點(diǎn)的。需要點(diǎn)擊的標(biāo)簽都要加上class="thickbox"。當(dāng)頁面出現(xiàn)滾動(dòng)條時(shí),彈出層固定在窗口的正中間不會(huì)移動(dòng)。當(dāng)彈出層中只是圖片時(shí),圖片大小會(huì)根據(jù)當(dāng)前窗口的大小進(jìn)行壓縮。所有的彈出層都可以按"esc"退出,除了需要點(diǎn)確認(rèn)的彈出層外,點(diǎn)擊彈出層以外的地方都可以關(guān)閉彈出層。
1.展示圖片(單張):
復(fù)制代碼 代碼如下:
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
<img src="images/single.jpg" alt="Plant" width="100" height="75" />
</a>
2.展示圖片(多張):
復(fù)制代碼 代碼如下:
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/>
</a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/>
</a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/>
</a>
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant4.jpg" alt="Plant 4" width="100" height="75"/>
</a>
這里每個(gè)a都要加上rel屬性,而且屬性值要一樣。前后展示圖可以通過" > "和" < "來切換
3.彈出層內(nèi)容在當(dāng)前頁面中時(shí):
復(fù)制代碼 代碼如下:
<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show" type="button">
the paragraph and input below in a ThickBox, or
<input alt="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show hidden modal content" type="button">
<div id="myOnPageContent" style="display:none;">
<p>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.</p>
<p><select name=""><option>test</option></select></p>
</div>
<div id="hiddenModalContent" style="display:none;">
<p>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.</p>
<p style="text-align: center;"><input type="submit" onclick="tb_remove()" value=" Ok " id="Login"/></p>
</div>
第一個(gè)input點(diǎn)開的彈出層有input框、title和操作按鈕以及文字。第二個(gè)input點(diǎn)開的彈出層只有文字。
彈出層的大小是根據(jù)input的alt屬性里的width和height值來定義的。下面講到的幾種情況也是這樣來定義彈出層大小的。
4.調(diào)用外部文件,彈出層是iframe
復(fù)制代碼 代碼如下:
<a href="ajaxFrame.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>
<a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
如果彈出層是嵌套在iframe里需要添加“TB_iframe=true"。
第一個(gè)是調(diào)用ajaxFrame.PHP文件。
第二個(gè)是調(diào)用ajaxOverFlow2.html文件。
第三個(gè)是調(diào)用了iframeModal.html文件,隱藏了title和操作按鈕。
5.調(diào)用外部文件,彈出層不是iframe
復(fù)制代碼 代碼如下:
<a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
第一個(gè)調(diào)用ajaxOverFlow.html文件。
第二個(gè)調(diào)用ajax.PHP文件。
第三個(gè)調(diào)用ajaxLogin.html文件,form表單。
第四個(gè)調(diào)用ajaxTBcontent.html文件,彈出層里再調(diào)用newTBcontent.html文件。
您可能感興趣的文章:
- 全面詳細(xì)的jQuery常見開發(fā)技巧手冊(cè)
- 60個(gè)很實(shí)用的jQuery代碼開發(fā)技巧收集
- 30個(gè)經(jīng)典的jQuery代碼開發(fā)技巧
- jQuery常見開發(fā)技巧詳細(xì)整理
- Web前端新人筆記之jquery入門心得(新手必看)
- jquery easyui使用心得
- jQuery Ajax使用心得詳細(xì)整理及注意事項(xiàng)
- 關(guān)于jQuery UI 使用心得及技巧
- php+jquery編碼方面的一些心得(utf-8 gb2312)
- 關(guān)于Jqzoom的使用心得 jquery放大鏡效果插件
- jQuery 使用個(gè)人心得
- jQuery 研究心得 取得屬性的值
- 15個(gè)值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得總結(jié)【經(jīng)典收藏】
相關(guān)文章
jQuery和HTML對(duì)某個(gè)標(biāo)簽設(shè)置只讀或者禁用屬性的方式
這篇文章主要介紹了jQuery和HTML對(duì)某個(gè)標(biāo)簽設(shè)置只讀或者禁用屬性的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法
這篇文章主要介紹了jQuery獲取選中內(nèi)容及設(shè)置元素屬性的方法,需要的朋友可以參考下2014-07-07JQuery移動(dòng)頁面開發(fā)之屏幕方向改變與滾屏的實(shí)現(xiàn)
這篇文章主要介紹了JQuery移動(dòng)頁面開發(fā)之隨屏幕方向改變與滾屏的實(shí)現(xiàn),通過相關(guān)兩個(gè)事件的添加來達(dá)到響應(yīng)移動(dòng)設(shè)備上操作的效果,需要的朋友可以參考下2015-12-12jquery實(shí)現(xiàn)橫向圖片輪播特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)橫向圖片輪播特效代碼,效果很精致,實(shí)現(xiàn)方法很簡(jiǎn)單,特推薦給大家,希望大家可以喜歡。2015-11-11從零開始學(xué)習(xí)jQuery (二) 萬能的選擇器
本章講解jQuery最重要的選擇器部分的知識(shí). 有了jQuery的選擇器我們幾乎可以獲取頁面上任意的一個(gè)或一組對(duì)象, 可以明顯減輕開發(fā)人員的工作量.2010-10-10z-blog SyntaxHighlighter 長(zhǎng)代碼無法換行解決辦法(基于jquery)
這篇文章主要介紹了z-blog SyntaxHighlighter 長(zhǎng)代碼無法換行解決辦法(jquery),需要的朋友可以參考下2015-11-11jQuery實(shí)現(xiàn)原理的模擬代碼 -6 代碼下載
前幾篇文章中的示例代碼,去掉了幾個(gè) bug, 這里一起提供下載。2010-08-08