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中调用:

add_thickbox();

显示Thickbox

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

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

有个简单的方法来生成AJAX的URL(PHP):

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

关闭Thickbox

tb_remove();
喜欢这篇文章吗,不妨分享给朋友们吧!