专业WP商业设计开发销售中心

WordPress的后台使用ThickBox作为浮动层展示工具，下面简单介绍一下使用方法。ThickBox功能强大，有两种使用方法，一种是使用URL参数调用，一种是JS调用。

URL参数调用

在使用Thickbox之前，需要调用它：

<?php add_thickbox(); ?>

以下是5种模式，它们都有一个共同点就是都需要class="thickbox"：

1、单幅图像

使用说明：包含图片的A标签有class="thickbox"。

<p><a href="https://www.qqworld.org/wp-content/uploads/2015/03/feature-image.jpg" title="添加图说到标题属性或留空" class="thickbox"><img src="https://www.qqworld.org/wp-content/uploads/2015/03/feature-image.jpg" alt="Single Image"/></a></p>

2、相册

使用说明：包含图片的A标签上有class="thickbox"和相同的rel，class用于ThickBox识别，rel用于相册的分类。

<p>
	<a href="http://wp.demo.gov/wp-content/uploads/2013/12/1.jpg" title="添加图说到标题属性或留空" class="thickbox" rel="gallery-plants"><img src="http://wp.demo.gov/wp-content/uploads/2013/12/1-300x106.jpg" alt="Plant 1" /></a>
	<a href="http://wp.demo.gov/wp-content/uploads/2013/12/2.jpg" title="添加图说到标题属性或留空" class="thickbox" rel="gallery-plants"><img src="http://wp.demo.gov/wp-content/uploads/2013/12/2-300x106.jpg" alt="Plant 2" /></a>
	<a href="http://wp.demo.gov/wp-content/uploads/2013/12/3.jpg" title="添加图说到标题属性或留空" class="thickbox" rel="gallery-plants"><img src="http://wp.demo.gov/wp-content/uploads/2013/12/3-300x106.jpg" alt="Plant 3" /></a>
</p>

3、内嵌内容

使用方法：调用指定ID的元素中的内容。

<div id="my-content-id" class="hidden">
	<p>这是隐藏的内容！当点击链接后，它将显示在ThickBox中。</p>
	<div id="divstyle"><input type="button" value="测试按钮" class="button" /> <input type="button" value="Test Button" class="button button-primary" /></div>
</div>
<p><a href="#TB_inline?width=600&inlineId=my-content-id" class="thickbox">查看内嵌的内容！</a></p>

4、内联框架 iFrame

使用方法：在URL参数中添加TB_iframe=true。

<p>
	<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="添加说明到标题属性或留空" class="thickbox">范例1</a>
	<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="添加说明到标题属性或留空" class="thickbox">范例2</a>
	<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="添加说明到标题属性或留空" class="thickbox">打开内联框架</a>
</p>

5、AJAX

和内联框架类似，只不过不使用内联框架而是直接显示在Thickbox容器中。

<p>
	<a href="ajaxOverFlow.html?height=300&width=300" title="添加说明到标题属性或留空" class="thickbox">Scrolling content</a>
	<a href="ajax.PHP?height=220&width=400" class="thickbox" title="添加说明到标题属性或留空">No-scroll content</a>
	<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="请登录">登录 (modal)</a>
	<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">更新ThickBox内容</a>
</p>

JS调用

准备工作

在使用之前同样需要先调用Thickbox，建议在admin_enqueue_scripts中调用：

<?php add_thickbox(); ?>

显示Thickbox

相当于AJAX调用的效果，在程序中使用起来会更加灵活。

tb_show("请检查相册图片", 'https://www.qqworld.org/wp-admin/admin-ajax.php?action=check-gallery');

有个简单的方法来生成AJAX的URL（PHP）：

<?php
$url = add_query_arg(
	array(
		'action' => 'getTheContent',
		'query_var1' => 'value1',
		'query_var2' => 'value2'
	),
	admin_url( 'admin-ajax.php' )
);
?>

关闭Thickbox

tb_remove();