擴展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和添加選項卡

回答

相關問題