thickbox使用

容远
2023-12-01

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>

 

转载于:https://www.cnblogs.com/zgaspnet/archive/2012/03/29/2423823.html

 类似资料: