WordPress 教程:在 WordPress 后台使用 ThickBox 制作弹出层

最近在项目中进行 WordPress 后台开发的时候,需要制作弹出层,经过一轮测试,发现还是 WordPress 原生支持的 ThickBox 比较方便。

WordPress 的 ThickBox jQuery 库

WordPress 后台自带的 ThickBox jQuery 库是经过 WordPress 修改的,比如目前插件更新提示的详情链接就是使用 ThickBox 做的。

WordPress 后台自带的 ThickBox jQuery 库有两种使用方式:

  • iframe 模式:在弹出层中加载另外一个网页。
  • inline 模式:在弹出层中加载 HTML 片段

下面分别详细讲讲这两种模式的详细使用方法:

iframe 模式


<?php add_thickbox(); ?>

点击查看<a class="thickbox"  title="如何使用七牛云存储的优惠码" href="/wp-admin/admin.php?page=wpjam-qiniutek-coupon&TB_iframe=true&width=420&height=480" >详细七牛优惠码使用指南</a>

上面的例子就是在 七牛镜像存储 WordPress 插件中在设置页面使用的代码,其中:

无论是 iframe 模式还是 inline 模式,首先都要通过 <?php add_thickbox(); ?> 方式加载 ThickBox 库,然后一定要设置 a 标签的 class 的属性为:”thickbox”,不然 ThickBox 不会生效。

a 标签的 href 属性即为 iframe 要加载的页面,TB_iframe 参数指定的是 ThickBox 的 iframe 模式,width 参数指定了弹出层的宽度,height 参数指定了弹出层的高度。

如果还定义了 a 标签的 title 属性,则为弹出层的标题。

inline 模式


<?php add_thickbox(); ?>

<a class="thickbox" title="感谢 Denis" href="#TB_inline?height=220&width=220&inlineId=donate-422">感谢</a>

<div id="donate-422" style="display:none;">
	<p>你可以通过以下方式捐助该用户。。。</p>
</div>

inline 模式和 iframe 模式很多参数和用法都是相同,最大的区别,它不是一个链接,而是链接的锚点,#TB_inline 指定了 ThickBox 的 inline 模式,inlineId 则指定了弹出层的 HTML 片段来自哪里。

标签:

热门文章