thickbox使用

1.一张图片

描述:

这是ThickBox的一个简单实例，这个例子展示了在中放置一张图片（请看演示）。

说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 在href属性中指定一个张图片地址(.jpg .jpeg .png .gif .bmp)

<a href="Upimg/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="Upimg/single_t.jpg" alt="Single Image"/></a>

2.多张图片

描述:

这个例子和单张图片差不多，但他允许使用rel属性使多张图片成为一组，在ThickBox里导航。这种完美的使用方法适用于图片集。

使用说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox; (class="thickbox")
• 在href属性中指定一个张图片地址 (.jpg .jpeg .png .gif .bmp)
• 给每一个link元素一个相同的rel值。（比如：rel="gallery-plants"）

重点提醒:

当你打开一个ThickBox图片集的时候, 你能通过键盘的左右箭头键向前和向前和向后导航（在 ThickBox 里也提供了Next和Previous的链接）。 图片将会在图片集中按HTML文档流程从第一张显示到最后一张。

 

<a href="Upimg/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant1_t.jpg" alt="Plant 1" /></a> 

<a href="Upimg/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant2_t.jpg" alt="Plant 2" /></a> 

<a href="Upimg/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant3_t.jpg" alt="Plant 3" /></a> 

<a href="Upimg/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant4_t.jpg" alt="Plant 4" /></a>

 

3.内嵌内容

描述:

页面中的内嵌内容，隐藏的或是显示的均可以放置在ThickBox中。

使用说明:

• 创建一个link元素(<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 给link元素的href属性设置为: #TB_inline
• 在href属性的值#TB_inlineIn后面追加一下字符:

  ?height=300&width=300&inlineId=myOnPageContent

• 根据你的实际需要更改height, width, 和 inlineId的值（这里的inlineID就是包含你想显示在ThickBox上的内容的容器的id）。
• 当然你也可以在参数字符串中加 modal=true(比如. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes 或 no才能关闭ThickBox。

重点提醒:

如果内嵌在ThickBox的内容多于ThickBox显示的尺寸，一个滚动条会出现。请确认ThickBox的尺寸和内容的匹配避免出现滚动条而显示全部内嵌内容。也就是说，如果不想要滚动条，你可以增加ThickBox的宽和高直到内嵌的内容不需要滚动条就能全部显示。

 

 

<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" />  


 

 

4.AJAX

描述:

采用一个隐藏的HTTP request (AJAX) 从同一个服务器上获取文件，并使用显示其内容。

使用说明:

• 创建一个link元素 (<a href>)
• 给创建的这个link元素一个class属性，其值是：thickbox (class="thickbox")
• 给link元素的href属性指向一个链接文件或是服务器目录。(href="ajaxLogin.htm")
• 在href属性的URL后面追加以下字符来结束URL:

  ?height=300&width=300

• 根据需要更改宽和高的值。
• 当然，你也可以在上面的参数字符串再加上modal=true(比如. ?height=300&width=300&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“login”这个例子则要求点击yes 或 no才能关闭ThickBox。

重点提醒:

为了在新打开的Ajax ThickBox中打开新的Ajax内容，他的代码必须包含适当的 HTML (class=""thickbox) 来加载一个Ajax ThickBox (请留意演示例子)。其他唯一需要注意的一个地方就是调用的ThickBox必须包含宽和高，如果你给这两项留空，则窗口会自适应到默认大小（630*440）.

 

<a href="Upimg/ajaxOverFlow.html?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">有滚动条的内容</a>  

<a href="Upimg/ajax.html?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">没滚动条的内容</a>  

<a href="Upimg/ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">登入(模式)</a>  

<a href="Upimg/ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">更新ThickBox内容</a>