LeftAndMain 확장 및 탭 추가

Question

저는 LeftAndMain Extension에서 탭 기능을 사용하려고 노력하고 있습니다.

관리자 패널에서 "설정"탭 설정을보고있는 방법에 대한 문서를 찾지 못했습니다.

내가 말했듯이, 장거리 슛 : P이 때문에 JS 오류에 그러나 토글 간의 기능이 작동하지 않는, 탭으로 아름답게 보이게

:

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

/인 MyModule 내가 탭 클래스의 대부분은 jQuery를 UI로 추가되었는지 알고 있어요

<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> 

그러나 내가 디에 아직이야 /templates/MyAdmin_Content.ss 초기에 필요하지 않은 부분을 제거하기 위해 이러한 탭을 어떻게 인스턴스화 하는지를 살펴보십시오. 내가 기대했다

단순히 updateCMSFields()에 액세스 할 수 있지만 방법은 포인터에 대한 기대 LeftAndMain

에 존재하지 않는, 감사

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>