`
learnmore
  • 浏览: 603016 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

thickbox.js

AjaxjQueryIE框架Windows 
阅读更多
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&amp;
TB_iframe=true&amp;height=500&amp;width=820" title="OECSPACE" class="thickbox"> OECSPACE </a>

<a href="iframebox.html?keepThis=true&TB_iframe=true&height=500&width=820
&amp;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&amp;width=350&amp; 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&amp;width=300&amp;
inlineId=hiddenModalContent&amp; 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&amp;width=400&amp;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&amp;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
本站只提供完整的程式,若需要經過壓縮的程式請自行前往下載.
本站所提供下載的檔案會依照官方網站發布更新程式而不定期更新.
分享到：
| jni调用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    thickbox插件(jquery.js-thickbox.js-thickbox.css)含三个文件

    1. **jQuery.js**：这是jQuery库的主要文件，它简化了JavaScript编程，提供了丰富的选择器、DOM操作、事件处理等功能。在ThickBox中，jQuery用于选择和操作DOM元素，实现弹出框的动态创建、显示和隐藏，以及对用户...

    jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    最终效果： 代码如下: &lt;!... &lt;head&gt; &lt;... charset=utf-8″/&gt;...弹出层插件:jquery.artwl.thickbox.js&lt;/title&gt; [removed][removed] [removed] /* File Created: 三月 1, 2012 Author:artw

    thickbox-compressed.js

    jquery插件,web开发js,jquery

    thickbox.css

    jquery,一个web弹出层样式表,跟thickbox.js文件对应使用

    jquery 常用工具集合 jcarousellite_1.0.1.js jquery.lazyload.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...

    thickbox3.1.zip

    - `thickbox.js` 或 `thickbox.min.js`：这是Thickbox的主要JavaScript文件，包含所有功能的实现。 - `tb-ie6.png`, `tb-close.png` 等图片文件：这些是Thickbox所需的图形资源，如关闭按钮图标等。 - `license.txt`...

    Thickbox 3.1插件包

    Thickbox 3.1是一款流行且功能丰富的JavaScript和CSS插件，用于创建弹出式图像、媒体和页面。这个插件包包含了实现这一功能所需的所有核心组件，包括JavaScript文件和CSS样式表，以及可能的注释和参考资料，使得...

    thickbox

    而"thickbox.js"是JavaScript文件，包含了Thickbox的主要逻辑和功能实现。 使用Thickbox时，你需要在HTML中添加特定的类名和属性来标记你想要作为弹出窗口的内容。例如，对于图像，你可以这样做： ```html ...

    thickbox的具体使用方法

    - thickbox.js：这是Thickbox的核心JavaScript文件，实现了弹出窗口的逻辑。 - tt.js：这是一个可选的文件，用于提供对 Thickbox 的文字提示支持。 - images：这个文件夹包含了Thickbox所需的图片资源，如关闭按钮、...

    thickbox插件

    6. **脚本功能**：thickbox.js和thickbox-compressed.js是Thickbox的JavaScript文件，其中包含了插件的主要逻辑和功能。thickbox-compressed.js是压缩版本，用于减小文件大小，加快页面加载速度。 7. **易用性**：...

    thickbox 简单实例

    Thickbox的配置方式主要通过修改其核心脚本thickbox.js。你可以调整各种参数来定制其行为，例如： 1. `tb_width` 和 `tb_height`：定义弹出窗口的宽度和高度。 2. `tb_caption`: 是否显示标题，以及标题的样式。 3....

    thickbox的使用

    1. `thickbox.js` 或其压缩版 `thickbox-compressed.js`，这是插件的主要JavaScript实现。 2. `ThickBox.css`，这是定义ThickBox样式的重要CSS文件。 3. `loadingAnimation.gif`，这是一个加载指示器图片，会在内容...

    jquery插件thickbox的使用方法

    &lt;script type="text/javascript" src="js/thickbox.js"&gt; ``` 同时，也需要加载ThickBox的CSS样式文件： ```html &lt;link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen"/&gt; ``` 此外，...

    ThickBox 3.1调用方法+实例演示.zip

    这通常涉及将`thickbox.css`和`thickbox.js`（可能还包括`jquery.js`，因为ThickBox依赖jQuery）链接到你的文档头部。 2. **基本调用**：ThickBox可以通过添加特定的HTML属性来触发。例如，如果你想要一个图片在...

    thickbox3.1汉化版

    本人修改了thickbox.js以及thickbox-compressed.js两个文件，关闭按钮汉化，并且已支持jquer1.3.2版. 汉化了示例页面，使用时，只需引入thickbox.js和thickbox.css，以及一个加载中的图片就好了

    ThickBox 3_1

    - `thickbox.js`：JavaScript 文件，包含了ThickBox的核心逻辑。 - `tb-ie.js`（可能包含）：用于解决旧版Internet Explorer的兼容性问题。 - 图片资源文件：如`loadingAnimation.gif`、`close.gif`等，用于显示加载...

    ThickBox3.1弹出层

    2. `thickbox.js`: JavaScript核心代码，实现弹出层的逻辑和用户交互处理。 3. `tb-setup.js`: 可能是配置文件，用于设置默认参数或初始化ThickBox3.1。 4. 图像资源：如加载指示符、关闭按钮等，用于增强用户体验。...

    thickbox3.1实例

    这些文件通常包括`thickbox.css`，`jquery.js`，以及`thickbox.js`。确保这些文件被正确链接到HTML文档中，以确保Thickbox可以正常工作。 接下来，我们需要对要显示的内容进行标记。Thickbox支持多种类型的媒体，如...

Magicbox
Global site tag (gtag.js) - Google Analytics