用WordPress内置jQuery制作Tabs滑动效果

Tabs滑动效果是冰古比较喜欢用在WordPress插件设置页上的一个流行元素。因为它可以有效地压缩页面的长度，避免用户拉动才能看到内容；还有就是这个效果很coooool，你不觉得吗？

jQuery可以很方便地制作出流行的Tabs滑动效果，于是我们也就可以利用WordPress内置的jQuery快捷地在你的插件或主题中加入Tabs滑动效果。以下就看看如何在插件的设置页中加入该效果吧。

首先是准备设置页的HTML

    function test_setting_page() {
        echo <<<TABS
<div id="wrapper">
    <ul>
        <li><a href="#setting"><span>设置</span></a></li>
        <li><a href="#uninstall"><span>卸载</span></a></li>
    </ul>
    <div id="setting">
        <p>这里就是设置内容</p>
    </div>
    <div id="uninstall">
        <p>这里是卸载内容</p>
    </div>
</div>
TABS;
    }

这里用一个id为wrapper的div包裹设置页中要用到的HTML代码。跟着是ul列表，列表中的li就是Tabs滑动效果中的Tab。li中的#setting和#uninstall对应下面id为setting和uninstall的div，也就是说点击#uninstall对应的Tab就出现id为uninstall的div里的内容。需要更多的tab，按照这样的格式添加就可以了。
现在的效果：

接下来，我们为它添加必须的jQuery

    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');

    add_action('admin_footer', 'test_setting_js');
    function test_setting_js() {
        echo <<<JS
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#wrapper").tabs();
});
</script>
JS;
    }

三个wp_enqueue_script载入Tabs效果中要用到的jQuery库，跟着在后台的底部加上一小段jQuery调用代码（注：这里不能使用$，而用jQuery代替），其中的#wrapper就是上面HTML中的div。
现在的效果：

最后用CSS美化一下Tabs

    add_action('admin_head', 'test_setting_css');
    function test_setting_css() {
        echo '<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />';
    }

CSS都应该添加到head标签里，所以是将CSS添加到后台头部的。虽然WordPress内置了jQuery库，但却没有内置美化用的CSS，所以要自己添加CSS，当然jquery官方提供了很多美化CSS，你选择一个就可以了，不过最好还是将该CSS保存为本地文件，而不是像这里用外链调用。
最后效果：

上面例子的完整代码

参考：UI/API/1.7.1/Tabs