建立自訂工具列版面 creating-custom-toolbar-layout

<%@include file="/libs/fd/af/components/guidesglobal.jsp" %>
<cq:includeClientLib categories="customtoolbarlayout" />
<c:if test="${isEditMode}">
        <cq:includeClientLib categories="customtoolbarlayoutauthor" />
</c:if>
<div class="guidetoolbar mobileToolbar mobilecustomToolbar" data-guide-position-class="guide-element-hide">
    <div data-guide-scroll-indicator="true"></div>
    <%@include file="../toolbarCommon.jsp" %>
</div>

<%@taglib prefix="fn" uri="https://java.sun.com/jsp/jstl/functions"%>
<%--------------------
This code iterates over all the tool bar items using the guideToolbar bean.
If the number of toolbar items are more than 3, then we create a dropdown menu using bootstrap for other actions present in the toolbar.
In both desktop and mobile devices, the layout is different.
---------------------------------%>

<c:forEach items="${guideToolbar.items}" var="toolbarItem" varStatus="loop">
    <c:choose>
      <c:when test="${loop.index gt 2}">
   <c:choose>
    <c:when test="${loop.index eq 3}">
                  <div class="btn-group dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle label" data-toggle="dropdown">Actions <span class="caret"></span></button>
                    <button type="button" class="btn btn-primary dropdown-toggle icon" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span></button>
          <ul class="dropdown-menu" role="menu">
                        <li>
                            <div id="${toolbarItem.id}_guide-item">
                              <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
                           </div>
                        </li>
                        <c:if test="${loop.index eq (fn:length(guideToolbar.items)-1)}">
                             </ul>
                             </div>
                        </c:if>
    </c:when>
    <c:when test="${loop.index eq (fn:length(guideToolbar.items)-1)}">
                       <li>
                                  <div id="${toolbarItem.id}_guide-item">
                                      <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
                                  </div>
                        </li>
                    </ul>
                  </div>

    </c:when>
    <c:otherwise>
      <li>
       <div id="${toolbarItem.id}_guide-item">
        <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
       </div>
      </li>
    </c:otherwise>
   </c:choose>
      </c:when>
      <c:otherwise>
  <div id="${toolbarItem.id}_guide-item">
        <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
     </div>
      </c:otherwise>
 </c:choose>
</c:forEach>

.mobilecustomToolbar .dropdown {
    display: inline-block;
}

.mobilecustomToolbar .dropdown {
    float: right;
}

.mobilecustomToolbar .dropdown > button {
   padding: 6px 12px;
}

.mobilecustomToolbar .dropdown .guideFieldWidget, .mobilecustomToolbar .dropdown .guideFieldWidget button {
    width: 100%;
}

.mobilecustomToolbar .dropdown .caret{
    border-bottom: 6px solid;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
 border-top: transparent;
}

.mobilecustomToolbar .dropdown-menu{
 top: auto;
 bottom: 100%;
}

.mobilecustomToolbar .btn-group {
 vertical-align: super;
}

.mobilecustomToolbar .glyphicon {
 font-size: 24px;
}

@media (max-width: 767px){

 .mobilecustomToolbar .dropdown .guideButton .iconButton-icon {
   display: none;
    }

    .mobilecustomToolbar .dropdown .guideButton .iconButton-label {
   display: inline-block;
    }

    .mobilecustomToolbar .dropdown .guideButton button {
   background-color: #013853;
    }

 .mobilecustomToolbar .btn-group {
  vertical-align: top;
 }

}