当前位置:首页 > 转自点点  >> 用WordPress内置jQuery制作Tabs滑动效果
21日

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

作者:皇家元林 时间:2013年04月21日 围观者: 242 人 【0条评论】

首先是准备设置页的HTML

function test_setting_page() {
        echo <<
    
    

这里就是设置内容

这里是卸载内容

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 <<
jQuery(document).ready(function(){
    jQuery("#wrapper").tabs();
});

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 '';
    }

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/

标签:, , , ,

Leave a Reply



1811