<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 浮动特效</title>
<script type="text/javascript" src="js/jquery-compressed.js"></script>
<script type="text/javascript" src="js/thickbox1.js"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
</head>
<body>
文章摘要：
<div id="sectionb-1" class="anchor">
<h5 class="hfivepadding">描述:</h5>
<p>
这是 ThickBox 最简单的功能. 此例子放了一张图片在 ThickBox 里. (参看演示 tab)
</p>
<h5>使用说明:</h5>
<ul>
<li>创建一个 link 元素 (<a href>)</li>
<li>给 link 一个 class 属性并附值为 thickbox (class="thickbox")</li>
<li>在 href 属性里给图片文件 (.jpg .jpeg .png .gif .bmp) 提供一个路径</li>
</ul>
</div>
<div id="sectionb-2" class="anchor">
<h5>点击图片:</h5>
<p><a href="images/single.jpg"" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/plant4_t.jpg" alt="Image 2"/></a></p>
</div>
<br/><br/><br/><br/>
图片集
<br/>
<div id="sectionc-1" class="anchor">
<h5 class="hfivepadding">描述:</h5>
<p>
这个例子就和展示单一图片的功能一样, 只是除了使用了 rel 属性集合了图片, 所以在 ThickBox 中它们能被导航. 最理想的使用对象就是图片集.
</p>
<h5>使用说明:</h5>
<ul>
<li>创建一个 link 元素 (<a href>)</li>
<li>给 link 一个 class 属性并附值为 thickbox (class="thickbox")</li>
<li>在 href 属性里给图片文件 (.jpg .jpeg .png .gif .bmp) 提供一个路径</li>
<li>给每个 link 元素里添加一个 rel 元素并附上相同的值. (例如: rel="gallery-plants")</li>
</ul>
<h5>重要提示:</h5>
<p>当你打开 ThickBox 图片集时, 你能用键盘的左右箭头键向前和向前和向后导航 (在 ThickBox 里也提供了下一页和上一页的链接). 图片将会在画廊中按 HTML 文档流程从第一张显示到最后一张.</p>
</div>
<a href="images/plant1.jpg" title="http://hunan.cncmax.cn/blog.html" 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="" 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="http://hunan.cncmax.cn/blog.html" 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>
<br/><br/><br/><br/>
内嵌的内容格式版本
<br/>
<div id="sectiond-1" class="anchor">
<h5 class="hfivepadding">描述:</h5>
<p>
不管页面上隐藏的或显示中的内嵌内容都能被放到 ThickBox 中.
</p>
<h5>使用说明:</h5>
<ul>
<li>创建一个 link 元素 (<a href>)</li>
<li>给 link 一个 class 属性并附值为 thickbox (class="thickbox")</li>
<li>在 link 里给 href 的属性添加以下值 anchor: #TB_inline</li>
<li>在 href 的属性里的 #TB_inline 之后添加以下 query string : <pre class="exampleCode"><code class="html">?height=300&width=300&inlineId=myOnPageContent</code></pre></li>
<li>根据需要更改高和宽的值 (inlineID 是你想要放到 ThickBox 中显示的内容的 ID 值)</li>
</ul>
<h5>重要提示:</h5>
<p>如果在 ThickBox 中要显示的内嵌的内容超出了 ThickBox 的显示区域, 竖向滚动条将会显示. 你要避免出现滚动条就要给 ThickBox 设置一个适当的尺度. 换句话说, 如果你不要滚动条, 就要增加 ThickBox 的高和宽, 直道 ThickBox 不再显示滚动条.</p>
</div>
<li><a href="#TB_inline?height=300&width=300&inlineId=myOnPageContent1" title="如何用手机写班级留言2" class="thickbox">如何用手机写班级留2言？</a></li><span id="close">[ x ]</span>
<div id="myOnPageContent1" 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>
</div>
<li><a href="#TB_inline?height=300&width=300&inlineId=myOnPageContent2" title="如何用手机写班级留言2" class="thickbox">如何用手机写班级留2言？</a></li>
<div id="myOnPageContent2" 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>
</div>
<li><a href="#TB_inline?height=300&width=300&inlineId=myOnPageContent3" title="如何用手机写班级留言3" class="thickbox">如何用手机写班级留言？Show3</a></li>
<div id="myOnPageContent3" 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>
</div>
<br/><br/><br/><br/>
iFramed 的内容
<br/>
<div id="sectione-1" class="anchor">
<h5 class="hfivepadding">描述:</h5>
<p>
在 ThickBox 中打开被 iFramed URL. 对, 这正 <a href="http://amix.dk/greybox/demo.html">Greybox</a> 功能.</p>
<h5>使用说明:</h5>
<ul>
<li>创建一个 link 元素 (<a href>)</li>
<li>给 link 一个 class 属性并附值为 thickbox (class="thickbox")</li>
<li>在 link 的 href 属性中提供你要在 ThickBox 中显示的 URL.</li>
<li>在 href 的属性中 URL 之后添加以下 query: <pre class="exampleCode"><code class="html">?TB_iframe=true&height=400&width=600</code></pre></li>
<li>根据需要更改 query 中的高度和宽度的值</li>
</ul>
</div>
<p><a href="http://www.yahoo.com?TB_iframe=true&height=400&width=600" title="yahoo.com" class="thickbox">yahoo</a></P>
<p><a href="http://www.qiangshenglawer.com?TB_iframe=true&height=400&width=600" title="强晟律师事务所" class="thickbox">强晟律师事务所</a></p>
<p><a href="http://xuesheng.116311.com?TB_iframe=true&height=400&width=600" title="校园频道" class="thickbox">校园频道</a></p>
<p><a href="http://hunan.cncmax.cn/blog.html?TB_iframe=true&height=200&width=200" title="校园频道博客模块" class="thickbox">校园频道博客模块</a></p>
<p><a href="http://hunan.cncmax.cn/bbs.html?TB_iframe=true&height=200&width=200" title="校园频道论坛模块" class="thickbox">校园频道论坛模块</a></p>
<p><a href="http://hunan.cncmax.cn/blog.html?TB_iframe=true&height=200&width=200" title="校园电影博客模块" class="thickbox">校园频道电影模块</a></p>
<br/><br/><br/><br/>
iFramed 的内容AJAX 的内容
<br/>
<div id="sectionf-1" class="anchor">
<h5 class="hfivepadding">描述:</h5>
<p>使用隐藏的 HTTP request (AJAX) 来从同一个服务器中获取文件并在 ThickBox 中显示出内容.</p>
<h5>使用说明:</h5>
<ul>
<li>创建一个 link 元素 (<a href>)</li>
<li>给 link 一个 class 属性并附值为 thickbox (class="thickbox")</li>
<li>在 href 中给服务器上的 (.html .htm .cfm .php .asp .aspx .jsp .jst .rb .txt) 文件提供一个路径. (href="ajaxLogin.htm") </li>
<li>在 href 的属性中, 在文件的 URL 后添加以下 query: <pre class="exampleCode"><code class="html">?height=300&width=300</code></pre></li>
<li>根据需要更改 query 中的高度和宽度的值</li>
</ul>
</div>
<p><a href="http://www.blueidea.com/articleimg/2006/08/3912/ajaxOverFlow.htm?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">能使用滚动条的内容</a>
<a href="http://www.blueidea.com/articleimg/2006/08/3912/ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">不能使用滚动条的内容</a>
<a href="http://www.blueidea.com/articleimg/2006/08/3912/ajaxLogin.htm?height=100&width=250" class="thickbox" title="Please Sign In">登陆窗口</a></p>
</body>
</html>
http://www.blueidea.com/articleimg/2006/08/3912/thickbox.html
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
