首页 » 开源 » ThickBox 简单使用

ThickBox 简单使用

最近的项目中比较多使用的 ThickBox,今天就简单介绍下,ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。

要使用 ThickBox,需要下载三个文件:

  1. JS 文件:thickbox.js 或者压缩版本 thickbox-compressed.js
  2. CSS 文件:ThickBox.css
  3. 最后一个 Loading 图片:loadingAnimation.gif

除了以上三个文件之外,你还需要有 jQuery JavaScript 类库 或者压缩版,甚至可以使用 Google 提供 CDN 加速的版本

ThickBox 使用也非常见,首先在 HTML 文件的 HEAD 导入 jQuery JS 和 ThickBox JS 文件,并且 jQuery JS 文件必须在前:

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

然后打开 thinkbox.js 文件通过 tb_pathToImage 这个变量来设置 loadingAnimation.gif 文件的路径。

然后在 HEAD 导入 thickbox.css 文件:

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

当然你也可以吧 thickbox.css 里面的内容复制到你现在的 CSS 文件中,最后你只要给 a 元素天添加 class=”thickbox” 属性就可以开始用 thickbox。详细使用可以查看 ThickBox 官方教程

我在使用中碰到的最大问题是,如果网页上有 Flash 的话,往往 Flash 会把 ThickBox 的弹出框给挡住,这时的解决方法也是非常简单,就是给 Flash 设置透明的参数:wmode=”transparent”。详细就是给 Flash 的 object 标签添加如下参数:<param name="wmode" value="transparent">,并在 embed 标签中设置 wmode=”transparent”,如果使用 AC_FL_RunContent,可以加多一对参数 ‘wmode’,'transparent’ 即可。如果还是有问题,可以尝试给 Flash 外面增加一个 DIV 标签,并给他设置 z-index:0; 的样式。

标签:

分享到:

7 条评论 添加你的评论 →

  • welee 2009-04-25 03:06:40 #

    很好,去试试看。

    支持 反对1

  • Brando 2009-04-25 09:23:47 #

    人家thickbox已经很长时间没更新了,如果图片大于屏幕尺寸,那就尴尬了。

    支持 反对

  • Showfom 2009-04-25 10:16:38 #

    用HighSlide的飘过~

    支持 反对

  • ftao 2009-04-27 08:56:38 #

    还有一个叫做blockUI的插件跟着功能相仿,只是没有这个强大。一直想找个可以锁屏拖动的,不知道博主有没有可以推荐的? :twisted: :twisted: :twisted: :twisted:

    支持 反对

  • robertsky123 2009-05-06 14:14:44 #

    除了thickbox还有很多类似的扩展,大家可以来我的相册看看特效!http://robertsky123.toypark.in/tbg2/?a=0

    支持 反对

  • 罗鹤 2010-10-14 11:38:15 #

    正在研究这个。希望好用

    支持 反对

  • lanserzhao_561 2011-02-11 16:16:17 #

    我晕,终于可以登录了

    支持1 反对

发表评论

你必须 登陆 之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼:

使用新浪微博登陆 使用腾讯微博登陆 使用豆瓣登陆

你也可选择直接在本站 注册