ThickBox 3.1
ThickBox 是 Cody Lindley 使用超輕量級的 jQuery 所開發,
ThickBox是多功能性的,它提供有對於圖像、內置框架、內嵌內容、AJAX內容 等變化, 在點擊連結後能在網頁形成美觀的透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持居中.
對於圖像能用單一或多張方式來展示,並能重新調整大於瀏覽器的圖檔
能夠在透明層中開啟內置框架預覽網頁
開啟顯示網頁中指定的區塊內容
AJAX Content 載入網頁內容
瀏覽器支援:
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+
下載JS、CSS與圖檔等檔案 放置於網頁目錄下
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
運用一 :標準內置框架 || Example 1 | Example 2<a href="http://www.hsiu28.net/main/?keepThis=true&
TB_iframe=true&height=500&width=820" title="OECSPACE" class="thickbox"> OECSPACE </a>
<a href="iframebox.html?keepThis=true&TB_iframe=true&height=500&width=820
&modal=true" title="ThickBox" class="thickbox">Open iFrame Modal</a>
若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:
<input type="submit" value="close" onclick="self.parent.tb_remove();" />
運用二 :AJAX Content 載入檔案 || Example 1 | Example 2<a href="box.html?height=350&width=350& modal=true " title="AJAX Content" class="thickbox"> Example </a>
若刪除藍色部分 modal=true 就可顯示標題列.
載入的網頁例如.html .php .asp .jsp .cgi .txt...等等,適合簡易的內容.
載入的網頁中若要使用 AJAX Content 連結另一頁,請用同樣的方式.
下載查看以上範例中的兩個html檔案
由以上內部連結被開啟的網頁(例如 box.html),請將網頁儲存為utf-8模式,才可正常顯示中文,較適合簡易網頁.
若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:
<input type="submit" value="close" onclick="self.parent.tb_remove();" />
運用三 :顯示同一頁隱藏的文字 || Show hidden modal content在同一頁中利用 display:none 將此區塊隱藏,透過效果來顯示這些顯藏的內容喔!
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
<a href="#TB_inline?height=200&width=300&
inlineId=hiddenModalContent& modal=true" title="Title" class="thickbox">Show hidden modal content</a>
<div id="hiddenModalContent" style="display:none" >
<p>ThickBox hidden modal content</p>
<p style="text-align:center"><input type="submit" value=" O k " onclick="tb_remove()" /></p>
</div>
運用四 :按鈕開啟同一頁隱藏的文字 ||
在同一頁中利用 display:none 將此區塊隱藏,透過效果來顯示這些顯藏的內容喔!
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent " title="title" class="thickbox" type="button" value="Show" />
<div id="myOnPageContent" style="display:none" >
<p>ThickBox hidden modal content.</p>
</div>
若刪除藍色部分 modal=true 就可顯示標題列.
style="display:none" 將區塊內容設為隱藏,不隱藏內容可刪除.
若要開啟不同的隱藏內容,重複以上方式但需要更改上方粗體部分的ID名稱,也就是說不同的ID名稱才能開啟不同的內容.
運用五 :單一圖像預覽
<a href="img/photo1.jpg" title="Picture explanation" class="thickbox">
<img src="img/photo1_s.jpg" alt="Single Image" /></a>
運用六 :多張圖像預覽
<a href="img/photo2.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo2_s.jpg" alt="Plant 1" /></a>
<a href="img/photo3.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo3_s.jpg" alt="Plant 2" /></a>
<a href="img/photo4.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo4_s.jpg" alt="Plant 3" /></a>
預覽圖片支援的格式有 .jpg .jpeg .png .gif .bmp
多張圖片的效果再開啟後會顯示上一頁和下一頁的連結,只要在每一個圖片標籤使用 rel 元素並設定相同的值為 rel="gallery-plants"
以上連結標籤中的 height=150&width=400 代表開啟視窗的寬高
以上連結標籤中的 title="...." 代表標題列的主題與圖片的說明文字
2009.2.22 更新內置框架使用方法:
請打開 thickbox.js 找出第25行,將 tb_show(t,a,g); 修改為 top.tb_show(t,a,g); 感謝SR資源館提供修改方式
若套用此效果有出現某些問題,請先在網頁 html 首行加入DTD宣告看是可否解決你的問題
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
如果網頁中有放置 Flash 在開啟效果時會顯示在上層擋住圖檔,解決方式:
在 flash 的 Object 標籤加入參數:
<param name="wmode" value="transparent">
在 embed 標籤加入參數:
wmode="transparent"
介紹 AJAX Loading 動態圖檔製造機,這個網站 ajaxload ,有圖案、顏色和背景透視等選擇,能讓你輕輕鬆鬆做出自己喜歡的Loading圖.
程式作者 jquery.com & Cody Lindley, Thickbox 3.1
本站只提供完整的程式,若需要經過壓縮的程式請自行前往下載.
本站所提供下載的檔案會依照官方網站發布更新程式而不定期更新.
分享到:
相关推荐
1. **jQuery.js**:这是jQuery库的主要文件,它简化了JavaScript编程,提供了丰富的选择器、DOM操作、事件处理等功能。在ThickBox中,jQuery用于选择和操作DOM元素,实现弹出框的动态创建、显示和隐藏,以及对用户...
最终效果: 代码如下: <!... <head> <... charset=utf-8″/>...弹出层插件:jquery.artwl.thickbox.js</title> [removed][removed] [removed] /* File Created: 三月 1, 2012 Author:artw
jquery插件,web开发js,jquery
jquery,一个web弹出层样式表,跟thickbox.js文件对应使用
个人把常用的一些jquery插件做了一个demo,里面有jquery.dropkick-1.0.0.js、slider.js、fullcalendar-1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery...
- `thickbox.js` 或 `thickbox.min.js`:这是Thickbox的主要JavaScript文件,包含所有功能的实现。 - `tb-ie6.png`, `tb-close.png` 等图片文件:这些是Thickbox所需的图形资源,如关闭按钮图标等。 - `license.txt`...
Thickbox 3.1是一款流行且功能丰富的JavaScript和CSS插件,用于创建弹出式图像、媒体和页面。这个插件包包含了实现这一功能所需的所有核心组件,包括JavaScript文件和CSS样式表,以及可能的注释和参考资料,使得...
而"thickbox.js"是JavaScript文件,包含了Thickbox的主要逻辑和功能实现。 使用Thickbox时,你需要在HTML中添加特定的类名和属性来标记你想要作为弹出窗口的内容。例如,对于图像,你可以这样做: ```html ...
- thickbox.js:这是Thickbox的核心JavaScript文件,实现了弹出窗口的逻辑。 - tt.js:这是一个可选的文件,用于提供对 Thickbox 的文字提示支持。 - images:这个文件夹包含了Thickbox所需的图片资源,如关闭按钮、...
6. **脚本功能**:thickbox.js和thickbox-compressed.js是Thickbox的JavaScript文件,其中包含了插件的主要逻辑和功能。thickbox-compressed.js是压缩版本,用于减小文件大小,加快页面加载速度。 7. **易用性**:...
Thickbox的配置方式主要通过修改其核心脚本thickbox.js。你可以调整各种参数来定制其行为,例如: 1. `tb_width` 和 `tb_height`:定义弹出窗口的宽度和高度。 2. `tb_caption`: 是否显示标题,以及标题的样式。 3....
1. `thickbox.js` 或其压缩版 `thickbox-compressed.js`,这是插件的主要JavaScript实现。 2. `ThickBox.css`,这是定义ThickBox样式的重要CSS文件。 3. `loadingAnimation.gif`,这是一个加载指示器图片,会在内容...
<script type="text/javascript" src="js/thickbox.js"> ``` 同时,也需要加载ThickBox的CSS样式文件: ```html <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen"/> ``` 此外,...
这通常涉及将`thickbox.css`和`thickbox.js`(可能还包括`jquery.js`,因为ThickBox依赖jQuery)链接到你的文档头部。 2. **基本调用**:ThickBox可以通过添加特定的HTML属性来触发。例如,如果你想要一个图片在...
本人修改了thickbox.js以及thickbox-compressed.js两个文件,关闭按钮汉化,并且已支持jquer1.3.2版. 汉化了示例页面,使用时,只需引入thickbox.js和thickbox.css,以及一个加载中的图片就好了
- `thickbox.js`:JavaScript 文件,包含了ThickBox的核心逻辑。 - `tb-ie.js`(可能包含):用于解决旧版Internet Explorer的兼容性问题。 - 图片资源文件:如`loadingAnimation.gif`、`close.gif`等,用于显示加载...
2. `thickbox.js`: JavaScript核心代码,实现弹出层的逻辑和用户交互处理。 3. `tb-setup.js`: 可能是配置文件,用于设置默认参数或初始化ThickBox3.1。 4. 图像资源:如加载指示符、关闭按钮等,用于增强用户体验。...
这些文件通常包括`thickbox.css`,`jquery.js`,以及`thickbox.js`。确保这些文件被正确链接到HTML文档中,以确保Thickbox可以正常工作。 接下来,我们需要对要显示的内容进行标记。Thickbox支持多种类型的媒体,如...