扩展LeftAndMain和添加选项卡

我正在尝试在我的LeftAndMain扩展中获取选项卡功能。扩展LeftAndMain和添加选项卡

我找不到任何关于如何实现这一目标的文档，因此我只是在管理面板中查看“设置”选项卡设置。

正如我所说的，长镜头：P

这使得他们精美的显示为标签，但是肘之间的功能不工作由于JS错误：

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>

我知道，大多数的标签类都通过jQuery UI的加入不过我还没有迪为我剪掉这些标签是如何修剪掉最初不需要的。

我希望能简单地访问updateCMSFields()但方法不对LeftAndMain

希望有一个指针存在，感谢

来源

2016-11-12 zanderwar

你能分享您使用添加扩展LeftAndMain代码？ –

Whytf会有谁downvote这个：/ – zanderwar

老问题，但我就死在这一点。

选项卡和选项卡式内容需要位于相同的“选项卡”容器中。在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>

来源

2017-10-06 01:02:41 Chris

扩展LeftAndMain和添加选项卡

回答

相关问题