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

WordPress, 转自点点 7 年前 回复

, , , ,

首先是准备设置页的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
转自http://wanwp.com/tips-tricks/howto-use-builtin-jquery-make-a-tabs-effect/

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)

9841