Question

I'm taking a long shot at trying to get tabs functional in my LeftAndMain Extension.

I couldn't find any documentation on how one would achieve this so I was just looking at the "Settings" tab setup in the Admin panel.

As I said, long shot :P

This makes them appear beautifully as tabs, however the toggle-between functionality isn't working due to a JS error:

jquery.js:551 Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.

/mymodule/templates/MyAdmin_Content.ss

<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
    <div class="cms-content-header north">
        <div class="cms-content-header-info">
            <% include CMSBreadcrumbs %>
        </div>

        <div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav ss-tabset">
            <ul class="cms-tabset-nav-primary ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"
                role="tablist">

                <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0"
                    aria-controls="Root_Servers" aria-labelledby="ui-id-1" aria-selected="true"><a
                        href="#Root_Servers" class="ui-tabs-anchor" role="presentation"
                        tabindex="-1">Main</a></li>

                <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="Root_Settings"
                    aria-labelledby="ui-id-2" aria-selected="false"><a
                        href="#Root_Settings" class="ui-tabs-anchor"
                        role="presentation" tabindex="-1" id="ui-id-2">Access</a></li>

            </ul>
        </div>
    </div>

    <div class="cms-content-fields cms-panel-padded center">
        <fieldset>
            <div id="Root" class="field CompositeField tabset">
                <div id="Root_Servers" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom"
                     aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false"
                     style="display: none;">
                    TAB 1
                </div>
                <div id="Root_Settings" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom"
                     aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true"
                     style="display: block;">
                    TAB 2
                </div>
            </div>
        </fieldset>
    </div>

    <div class="cms-content-actions cms-content-controls south text-center">
        Footer
    </div>
</div>

I'm aware that majority of the tabs classes are added by jQuery UI however I'm yet to discover how these tabs are instantiated for me to trim off what isn't initially required.

I was hoping to simply access updateCMSFields() but method does not exist on LeftAndMain

Hoping for a pointer, thanks

Answer 1

老问题，但我也坚持这个。

标签和标签内容需要位于相同的标签内。容器。在Silverstripe的情况下，容器是.cms-tabset，因此将该类移动到顶部的.cms-content div可以实现。这里是问题的修改后的代码（修剪了一些脂肪以使其更清晰）：

<!-- Add .cms-tabset class here -->
<div class="cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">

<!-- Start north -->
<div class="cms-content-header north">
    <div class="cms-content-header-info">
        <% include CMSBreadcrumbs %>
    </div>

    <div class="cms-content-header-tabs cms-tabset-nav-primary ss-ui-tabs-nav">
        <ul class="cms-tabset-nav-primary">
            <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
                <a href="#Root_Servers" class="ui-tabs-anchor" role="presentation" tabindex="-1">
                    Testing
                </a>
            </li>
            <li class="ui-state-default ui-corner-top">
                <a href="#Root_Settings" class="ui-tabs-anchor" role="presentation" tabindex="-1">
                    Settings
                </a>
            </li>
        </ul>
    </div>
<!-- End north -->
</div>

<!-- Start center -->
<div class="cms-content-fields cms-panel-padded center">
    <div id="Root" class="field CompositeField tabset">
        <div id="Root_Servers" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom">
            TAB 1 Content
        </div>
        <div id="Root_Settings" class="tab  ui-tabs-panel ui-widget-content ui-corner-bottom">
            TAB 2 Content
        </div>
    </div>
<!-- End center -->
</div>

Extending LeftAndMain and Add Tabs

1 个答案: