玩WordPress » 技巧方法 » 2009 » 07 » 05 » 用WordPress内置jQuery制作Tabs滑动效果

用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,按照这样的格式添加就可以了。
现在的效果:
用WordPress内置jQuery制作Tabs滑动效果

接下来,我们为它添加必须的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。
现在的效果:
用WordPress内置jQuery制作Tabs滑动效果

最后用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保存为本地文件,而不是像这里用外链调用。
最后效果:
用WordPress内置jQuery制作Tabs滑动效果

上面例子的完整代码

参考:UI/API/1.7.1/Tabs

11 Responses to “用WordPress内置jQuery制作Tabs滑动效果”

  1. 大余 says:

    我想问问是不是jQuery至少得在WP2.8以上才得到支持?我下载了个主题在本地调试可以实现滑动效果(本地装了最新的WP2.8.2),但上传到Yo2上却没有那效果了(Yo2的WP版本是2.7.1),所以我猜测应该是这个问题。

  2. yen says:

    看不到添加了css之后的效果

  3. 大余 says:

    我找到原因了,是因为滑动效果使用jQuery库与一个插件(lightbox)的prototype库发生冲突了,重复定义了一个变量$,我将主题的两个关键$改为jQuery问题解决了,网上也很多关于这个问题的讨论。

  4. […] 更新:看看这个,《用WordPress内置jQuery制作Tabs滑动效果》更不错。 […]

  5. […] 用WordPress内置jQuery制作Tabs滑动效果 Welkin | 2010/01/07 | 分类:Wordpress | 标签: javascript jquery WordPress 代码 标签 设置 | 浏览:0次 原文链接:http://wanwp.com/tips-tricks/howto-use-builtin-jquery-make-a-tabs-effect/ […]

  6. mencase says:

    楼主:
    能不能制作一个jQuery+Tabs滑动插件
    调用最新文章\最新评论\标签\随机文章等,
    我看有些主题中已经有了!
    这个有利于
    压缩侧边栏!