CQ 대화 상자

Question

I 필드 "myBookmark"에 CSS 정의 및 CSS 클래스를 추가 할

에 CSS 클래스를 추가하는 방법 (아래 참조). 어떤 제안?

내가 CQ와 함께 일하고, 지금은

<?xml version="1.0" encoding="UTF-8"?> 
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" 
    jcr:primaryType="cq:Panel" 
    title="Interactions"> 
    <items jcr:primaryType="cq:WidgetCollection"> 
    <share 
    jcr:primaryType="cq:Widget" 
    title="Share" 
    xtype="dialogfieldset" 
    collapsed="{Boolean}false" 
    collapsible="{Boolean}true"> 
    <items jcr:primaryType="cq:WidgetCollection"> 
     <myBookmark jcr:primaryType="cq:Widget" type="select" xtype="selection" 
      defaultValue="" 
      fieldLabel="Share Button" 
      name="./share" > 
       <options jcr:primaryType="cq:WidgetCollection"> 
       <alignment1 jcr:primaryType="nt:unstructured" text="(inherit)" /> 
       <alignment2 jcr:primaryType="nt:unstructured" text="hide" value="hide"/> 
       <alignment3 jcr:primaryType="nt:unstructured" text="show" value="show"/> 
       </options> 
      </myBookmark> 
    </items> 
    </share> 
... 

(.이 탭은 페이지 속성을 열 때 발생합니다) : 청취자를 대화 상자 내부에 JS (http://dev.day.com/docs/en/cq/current/developing/components.html)를 통해 CSS를 추가하고 사용하여 CSS 파일을 추가 clientlibs (http://blogs.adobe.com/mtg/2011/11/building-components-in-adobe-cq-5-part-1-a-tutorial-on-clientlibs-using-jquery-ui.html)

이러한 대안이 내 필요에 맞지 않았습니다.

의 ExtJS 위젯의 클래스는 상자 구성 등록 정보에서 통해를 CH3OH 할 수

Answer 1

베네딕트 : cls. CQ5 Widgets API documentation을 참조하십시오.

<items jcr:primaryType="cq:WidgetCollection"> 
    <myBookmark 
     jcr:primaryType="cq:Widget" 
     cls="myClassName" 
     defaultValue="" 
     fieldLabel="Share Button" 
     name="./share" 
     type="select" 
     xtype="selection"> 
      <options jcr:primaryType="cq:WidgetCollection"> 

실제 CSS 규칙은 클라이언트 라이브러리에서 언급 한 것처럼 넣어야합니다. 클라이언트 라이브러리가 대화 상자를 여는 페이지에 연결되어 있는지 확인하면됩니다. 현재 속성에 따라 찾을 수 있습니다 <cq:includeClientLib css="css.test" />

Answer 2

: 당신은 wcm.edit에 결합 할 수 있습니다 (대화 상자를으로 모니터하는 CQ에 의해 사용되는) 또는 당신이 당신의 자신의 범주를 만들 수 있습니다 (예 : css.test)을 한 다음 자신에 의해 clientlib을 포함 http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.form.Label

'id '를 통해 DOM 요소'id '를 정의하고 'cls'를 통해 'class '속성을 정의 할 수 있습니다.

또한 일반적으로 원본 CSS 정의를 설정할 수있는 '스타일'속성이 있습니다.