将‘do_setting_sections()’输出为制表符，而不是一个在另一个的下面

时间：2014-10-19 作者：David Gard

我在管理页面上使用设置API，它非常简单。

public function on_show_page(){

?>
    <div id="admin-bar-button-page" class="wrap admin-bar-button">

        <h2><?php _e(\'Admin Bar Button Settings\', \'djg-admin-bar-button\'); ?></h2>

        <form action="options.php" method="post">

            <?php settings_fields(\'admin_bar_button_group\'); ?>
            <?php do_settings_sections(\'djg_admin_bar_button\'); ?>
            <p>
                <?php submit_button(\'Save Changes\', \'primary\', \'submit\', false); ?>
                <?php submit_button(\'Restore Defaults\', \'delete\', \'delete\', false); ?>
            </p>

        </form>
    </div>
<?php
}

然而，据我所知，无法将我的四个不同部分显示为选项卡（使用jQuery UI选项卡），而不是一个接一个地显示。

有人知道一种现成的方法吗？谢谢

2 个回复

最合适的回答,由SO网友:David Gard 整理而成

因为我找不到现成的方法，所以我创建了这个。别忘了让jquery-ui-tabs 脚本-

/** Replace the call to \'do_settings_sections()\' with a call to this function */
function do_settings_sections_tabs($page){

    global $wp_settings_sections, $wp_settings_fields;

    if(!isset($wp_settings_sections[$page])) :
        return;
    endif;

    echo \'<div id="abb-tabs">\';
    echo \'<ul>\';

    foreach((array)$wp_settings_sections[$page] as $section) :

        if(!isset($section[\'title\']))
            continue;

        printf(\'<li><a href="#%1$s">%2$s</a></li>\',
            $section[\'id\'],     /** %1$s - The ID of the tab */
            $section[\'title\']   /** %2$s - The Title of the section */
        );

    endforeach;

    echo \'</ul>\';

    foreach((array)$wp_settings_sections[$page] as $section) :

        printf(\'<div id="%1$s">\',
            $section[\'id\']      /** %1$s - The ID of the tab */
        );

        if(!isset($section[\'title\']))
            continue;

        if($section[\'callback\'])
            call_user_func($section[\'callback\'], $section);

        if(!isset($wp_settings_fields) || !isset($wp_settings_fields[$page]) || !isset($wp_settings_fields[$page][$section[\'id\']]))
            continue;

        echo \'<table class="form-table">\';
        do_settings_fields($page, $section[\'id\']);
        echo \'</table>\';

        echo \'</div>\';

    endforeach;

    echo \'</div>\';

}

这是它的CSS。您可以从jQuery UI website 如果你愿意，但没有一个适合我，所以我做了这个-

.ui-tabs ul.ui-tabs-nav{
    border-bottom: 2px solid #E2E2E2;
    line-height: 31px;
}
.ui-tabs ul.ui-tabs-nav li{
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: none;
    display: inline;
    padding: 8px 20px;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active{
    background-color: #F1F1F1;
    border-top: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
    border-bottom: none;
}
.ui-tabs ul.ui-tabs-nav li a{
    color: #6BACD9;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
}
.ui-tabs ul.ui-tabs-nav li a:hover{
    color: #4A89BF;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active a{
    color: #222222;
    cursor: default;
}

和一个简单的jQuery函数-

$(function(){
    $(\'#abb-tabs\').tabs();
});

SO网友:kaiser

要在管理UI中生成选项卡的标记如下所示：

<h2 class="nav-tab-wrapper">
    <a href="#" class="nav-tab">Tab #1</a>
    <a href="#" class="nav-tab nav-tab-active">Tab #2</a>
    <a href="#" class="nav-tab">Tab #3</a>
</h2>

现在，当您请求管理页面时，可以使用任何查询参数：

http://example.com/wp-admin/tabshow?tab=1

如果注册管理菜单页，只需添加一个查询参数?tab=1 直接连接至导航菜单链接。在UI回调中，然后使用admin_url() （已转义）：

$link = esc_url( admin_url( \'tabshow\' ) );

你也可以使用$_SERVER[\'REQUEST_URI\'] 只需参考同一页。最重要的是，您只需添加tab=1, tab=2, tab=n. 你明白了。

然后切换不同的内容

switch ( $_GET[\'tab\'] )
{
    default :
    case \'1\' :
        // contents of page 1
        break;
    case \'2\' :
        // contents of page 2
        break;
    case \'n\' :
        // contents of page \'n\'
        break;
}

结束

小码农CODE

将‘do_setting_sections()’输出为制表符，而不是一个在另一个的下面

相关推荐

jQuery Tabs in Shortcode API