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>

“令牌”包含Panel1，Panel2，Panel3标题。在代码片段中我需要做什么来获取面板视图以及拖放组件的选项？任何人都可以帮我解决这个问题。我是这个CQ5的新手。

Answer 1

使用手风琴和标签等容器的最佳方法是分离编辑和发布视图。在我的组件中，我有一个带有parsys的cotainer组件，我可以在其中添加accordion / tab项。这些项目组件再次具有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>

CQ5手风琴组件

1 个答案: