Компонент аккордеона CQ5

Question

После этого примера я пытаюсь разработать компонент аккордеона cq5. http://www.ryerson.ca/cmssupport/components/components_list/accordion.html

Я написал следующий код в моем файле Jsp -

for(int j = 0; j<tokens.length; j++){%> 
    <div class="accordion"> 
     <div class="accordion-section"> 
      <a class="accordion-section-title" href='#'> <%= tokens[j]%></a> 
        <div id='<%= j%>' class="accordion-section-content"> 
        <p> <cq:include path="par" resourceType="foundation/components/parsys" /></p> 
        </div> 
      </div> 
    </div> 

The "токены" имеет название Panel1, panel2, панелью3. Что мне нужно сделать в фрагменте кода, чтобы получить представление панели с возможностью перетаскивания компонента? Может кто-нибудь, пожалуйста, помогите мне в этом. Я новичок в этом CQ5.

Answer 1

Наилучший подход с контейнерами, такими как аккордеоны и вкладки, заключается в разделении вида редактирования и публикации. В моем компоненте у меня есть компонент cotainer с parsys, где я могу добавлять элементы аккордеона/табуляции. Эти элементы компонентов снова имеют парсы. В режиме редактирования они отображаются ниже друг друга, и только в представлении предварительного просмотра/публикации они отображаются с разметкой, необходимой Javascript. Вот пример того, как выглядит мой комбинированный компонент аккордеона/вкладки в JSP (с использованием JSTL и пользовательского контроллера), чтобы дать вам несколько идей:

<c:choose> 
    <c:when test="${isEditMode}"> 
     <cq:include path="items" resourceType="foundation/components/parsys" /> 
    </c:when> 
    <c:when test="${ctrl.style eq 'tabs'}"> 
     <div class="tab-navigation" role="navigation"> 
      <ul role="menu"> 
       <c:forEach items="${ctrl.items}" var="item"> 
        <li role="menuitem"><a href="#${item.id}">${item.title}</a></li> 
       </c:forEach> 
      </ul> 
      <c:forEach items="${ctrl.items}" var="item"> 
       <div id="${item.id}"> 
        <cq:include path="items/${item.path}" resourceType="foundation/components/parsys" /> 
       </div> 
      </c:forEach> 
     </div> 
    </c:when> 
    <c:otherwise> 
     <div class="accordion"> 
      <c:forEach items="${ctrl.items}" var="item"> 
       <div class="accordionsplit"> 
        <a class="accordion-header" href="#"> 
         <div> 
          <span>${item.title}</span> 
         </div> 
        </a> 
       </div> 
       <div class="accordion-content"> 
        <cq:include path="items/${item.path}" resourceType="foundation/components/parsys" /> 
       </div> 
      </c:forEach> 
     </div> 
    </c:otherwise> 
</c:choose>