Thickbox3.1 插件使用方法

隆飞宇
2023-12-01

官方网址: http://jquery.com/demo/thickbox/    Download thickbox.js or thickbox-compressed.jsThickBox.css


一.使用前需先在<head>中引入3个文件

<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>                /*jquery库*/

<script src="thickbox-compressed.js" type="text/java可script"></script>        /*thickbox插件*/

<link rel="stylesheet" href="thickbox.css" type="text/css" />                        /*弹出层样式*/

二.相关参数

       class="thickbox"                                调用特效(必须)
       height                                               打开页面的高度;
       width                                                打开页面的宽度;
       title="Iframe(Auto Hide)"                     title的内容;
       keepThis=true                                   

       TB_iframe=true                                 设置后iframe中的thickbox还有效果 (适用于thickbox嵌套)
       #TB_inline                                         调用当前页面的层;
       inlineId                                              当前页面层的ID;
       modal=true                                       表示禁用title,去掉即可显示title及可自动关闭;

三.具体的应用可分为以下几种

       1> 单个图片

           <a href="big.jpg" title="点击小图看大图" class="thickbox">                          /*title控制显示的标题显示*/

           <img src="small.jpg" alt="Single Image" />

           </a> 

       2>一组图片 (设置一组相同的rel属性)      //用 jquery-1.1.3.1.pack.js 时有效,更高级别的JQ库只会出现全屏黑

<a href="1.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="1_t.jpg" alt="Plant 1" /></a>

<a href="2.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="2_t.jpg" alt="Plant 2" /></a>

<a href="3.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="3_t.jpg" alt="Plant 3" /></a>

<a href="4.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="4_t.jpg" alt="Plant 4" /></a>

       3>内嵌内容                      /*可设定弹出层的高度、宽度、inlineId 控制显示的内容、modal控制是否显示标题栏*/

           点击按钮显示(属性加在alt中)

           <input type="button" alt="#TB_inline?height=200&width=300&inlineId=test" title="按钮" value="显示" class="thickbox" />

          点击链接显示(属性加在href中)

           <a href="#TB_inline?height=200&width=300&inlineId=hiddenModalContent&modal=true" title="链接" class="thickbox">显示</a>

           <div id="test" style="display:none">这里是隐藏的内容</div>

      4>iFramed内容

          <a href="boxs.html?keepThis=true&TB_iframe=true&height=100&width=220&modal=true" title="显示IF" class="thickbox">显示</a>

      5>Ajax内容

          <a href="box.html?height=350&width=350&modal=true" title="Ajax载入,页面无法查看源代码" class="thickbox">Example</a>

 

---------------------------------------------------------------------------------------------------------------------------
四.自定义内容
       1>更改右上角的关闭按钮文字"close or esc key"  
           修改 thickbox-compressed.js。
           查找关键字 "or esc key" ,将其删除,并将前面的close更改为[x]或 "关闭" ,然后把文件另存为utf- 8 格式
       2>修改遮罩层透明度
           修改thickbox.css。 
           查找.tb_overlaybg 修改相关数值
       3>关闭层:如果我们需要自己添加一个关闭按钮或者图片可以使用:
            οnclick= "self.parent.tb_remove();"
       4>thickbox插件默认情况是点击灰色的遮罩层就会关闭取消

           把两个$("#tb_overlay").click(tb_remove);去掉就可以取消掉

       5>

------------------------------------------------------------------------

五. 总结

     1>thickbox共有3种关闭弹窗的方式  close按钮 、key(左键点击) 、Esc键 ,可根据自己的需要修改thickbox中对应的代码 

     2>设置 modal=true时会屏蔽 title栏 此时3种关闭的方式也会清除,关闭方法需自行添加  tb_remove()

 

转载于:https://www.cnblogs.com/d5100/archive/2011/08/25/2153023.html

 类似资料: